@font-face {
  font-family: 'DroidNaskh';
  src: url("../fonts/DroidNaskh-Regular.eot");
  src: url("../fonts/DroidNaskh-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/DroidNaskh-Regular.woff") format("woff"), url("../fonts/DroidNaskh-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'DroidNaskh';
  src: url("../fonts/DroidNaskh-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
/*
IRAN Sans-serif fonts are considered a proprietary software. To gain
information about the laws regarding the use of these fonts, please
visit www.fontiran.com
---------------------------------------------------------------------
This set of fonts are used in this project under the license: (LHHUR)
---------------------------------------------------------------------
*/
@font-face {
	font-family: 'iransansfanum';
	src: url('../fonts/IRANSansWeb/woff/IRANSansWeb(FaNum)_Light.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 900;
	src: url('../fonts/IRANSansWeb/eot/IRANSansWeb_Black.eot');
	src: url('../fonts/IRANSansWeb/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'),
	url('../fonts/IRANSansWeb/woff2/IRANSansWeb_Black.woff2') format('woff2'),
	url('../fonts/IRANSansWeb/woff/IRANSansWeb_Black.woff') format('woff'),
	url('../fonts/IRANSansWeb/ttf/IRANSansWeb_Black.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: bold;
	src: url('../fonts/IRANSansWeb/eot/IRANSansWeb_Bold.eot');
	src: url('../fonts/IRANSansWeb/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
	url('../fonts/IRANSansWeb/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
	url('../fonts/IRANSansWeb/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
	url('../fonts/IRANSansWeb/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/IRANSansWeb/eot/IRANSansWeb_Medium.eot');
	src: url("../fonts/IRANSansWeb/eot/IRANSansWeb_Medium.eot?#iefix") format('embedded-opentype'),  /* IE6-8 */
	url('../fonts/IRANSansWeb/woff2/IRANSansWeb_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
	url('../fonts/IRANSansWeb/woff/IRANSansWeb_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
	url('../fonts/IRANSansWeb/ttf/IRANSansWeb_Medium.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/IRANSansWeb/eot/IRANSansWeb_Light.eot');
	src: url('../fonts/IRANSansWeb/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
	url('../fonts/IRANSansWeb/woff2/IRANSansWeb_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
	url('../fonts/IRANSansWeb/woff/IRANSansWeb_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
	url('../fonts/IRANSansWeb/ttf/IRANSansWeb_Light.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 200;
	src: url('../fonts/IRANSansWeb/eot/IRANSansWeb_UltraLight.eot');
	src: url('../fonts/IRANSansWeb/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
	url('../fonts/IRANSansWeb/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
	url('../fonts/IRANSansWeb/woff/IRANSansWeb_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
	url('../fonts/IRANSansWeb/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/IRANSansWeb/eot/IRANSansWeb.eot');
	src: url('../fonts/IRANSansWeb/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
	url('../fonts/IRANSansWeb/woff2/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
	url('../fonts/IRANSansWeb/woff/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
	url('../fonts/IRANSansWeb/ttf/IRANSansWeb.ttf') format('truetype');
}


:root {
	--main-color: #000000;
	--second-color : #ca2015;	
	--color-white : #ffffff;

	--footer-top-color: #0b0b0b;

	--main-header-color: var(--main-color);	


	--dark-font: #262626;
	
	--light-font2: #595959;
	--light-font1: #bbb;
	--second-font: var(--second-color);
}

/*------------------------------------*
   Common
*------------------------------------*/
* {font-family: IRANSans,verdana,tahoma;}
a:hover {text-decoration:none; color:var(--main-color); -webkit-transition:200ms all ease; -o-transition:200ms all ease; transition:200ms all ease;}

html {max-width:100%; overflow-x:hidden;}

body {color:#555; background:var(--body-bg-color); font-size:13px; line-height: 24px;}


h1,h2,h3,h4,h5,h6 {font-weight: bold;}
.h1, h1 {
	font-size: 18px;
}
.h2, h2 {
	font-size: 16px;
}
.h3, h3 {
	font-size: 14px;
}
a {text-decoration:none; color:#383838; -webkit-transition:200ms all ease; -o-transition:200ms all ease; transition:200ms all ease;}

a:focus {text-decoration:none; outline:none;}
a:active {outline: none; text-decoration: none;}


img {max-width:100%;}

ul {padding:0px;}
li{list-style:none;}

label{margin: 0;}
input[type=checkbox], input[type=radio]{margin-top: 0px; margin-left: 2px; vertical-align: middle; height: 22px; line-height: unset;}
input{border-radius: 3px; border:1px solid #dddddd; padding:0 12px; height: 40px; line-height: 40px;}

/*******************************
**			HEADER 
*********************************/
.header-top{
	height: 50px;
	background-color: var(--main-header-color);
}


.header-bottom{	
	border-bottom: 2px solid #aaa;				
}

.header-main{
	position: sticky;
  top: 0;
  z-index: 1030;

	background-color: #fff;	
	height:150px;
	bottom: 150px;
	border-bottom: 2px solid #aaa;
	color: var(--main-color);
	/* transition: background-color 0.5s ease; */
	transition: height .9s cubic-bezier(.4,0,.2,1), background-color 0.9s ease, color 1.9s ease ;
	
  will-change: height, background-color, color; 
}


/* transition: bottom .25s cubic-bezier(.4,0,.2,1); */

.header-main.collapsible {
	transition: max-height 0.5s ease, opacity 0.5s ease; /* انیمیشن برای تغییر ارتفاع و شفافیت */
	max-height: 100%; /* حداکثر ارتفاع برای حالت باز */
	overflow: hidden; /* مخفی کردن محتوای اضافی */
	opacity: 1; /* شفافیت کامل */
}


.header-main.collapsed {
	max-height: 0; /* ارتفاع صفر برای حالت جمع شده */
	opacity: 0; /* شفافیت صفر برای حالت جمع شده */
}
 
.header-main .header-fade-out {
	opacity: 0; /* محو شدن */
	visibility: hidden; /* مخفی کردن */
}

.header-main.lightface{
  /* transition: height .25s cubic-bezier(.4,0,.2,1); */
	background-color: #fff;	
	height:150px;
	bottom: 150px;
	border-bottom: 2px solid #aaa;
	color: var(--main-color) !important;
}


.header-main.darkface{
  /* transition: height .25s cubic-bezier(.4,0,.2,1); */
	background-color: #222;	
	height:70px;
	bottom: 70px;
	border-bottom: 2px solid #aaa;
	color: #eee !important;
}

.header-main.darkface a{
	color: #eee !important;
}

.header-main.lightface a:not(.member-link){
	color: var(--main-color) !important;
}

.header {
	display: flex;
	flex-direction: row;
	justify-content: center;
	height: 100%;
}

.hamburger-pos{
	justify-content: flex-start !important;
	flex-basis: 0;
	flex-grow: 1;
	min-width: 0;
	max-width: 100%;		
	margin-right: 30px !important;

	display: flex;
  align-items: center;
}

#logo img{	
	height: 100%;
	display: block;
  margin: 1px auto;
}

.sml-search i{
	font-size: 1.2rem;
}


/******************************************/
.sml-search {

	background-color: transparent; /* رنگ پس‌زمینه اولیه */
	transition: color 0.3s ease; /* انیمیشن برای تغییر رنگ متن */
	/* z-index: 1; برای قرار دادن عنصر بالای پس‌زمینه */
	position: relative;
}

.sml-search::before {
	content: ""; /* برای ایجاد یک عنصر خالی */
	position: absolute; /* قرار دادن در موقعیت مطلق */
	top: -10px; /* موقعیت بالا */
	left: -10px; /* موقعیت چپ */
	right: -10px; /* موقعیت راست */
	bottom: -10px; /* موقعیت پایین */
	/* background-color: #eee; رنگ پس‌زمینه */
	opacity: 0; /* شروع با شفافیت صفر */
	transition: opacity 0.3s ease, transform 0.3s ease; /* انیمیشن برای تغییر شفافیت */
	z-index: -1; /* قرار دادن پس‌زمینه زیر عنصر */
	border-radius: 50%;
	width: 40px;
	height: 40px;
	/* margin:5px; */
	transform: scale(0);
}

.header-main:has(.darkface) .sml-search::before {
/* .header-main.darkface > .sml-search::before { */
	background-color: #eee !important; 	
}

.header-main:has(.lightface) .sml-search::before {
	/* .header-main.darkface > .sml-search::before { */
		background-color: #333 !important; 	
	}
	
.sml-search:hover::before {
	opacity: 1; /* وقتی ماوس روی عنصر است، شفافیت به 1 تغییر می‌کند */
	transform: scale(1);
}

.sml-search:hover {
	cursor:pointer;		
	/* color: #ccc; */
}
/****************************************************/
.d-none {
	display : none;
}
/********************* smalls-group ********************/
.smalls-group{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end !important;
	flex-basis: 0;
  flex-grow: 1;
  min-width: 0;
  max-width: 100%;
}
/******************  Lang  *******************************/
.langs {
	padding: 7px 14px 7px 12px;
}

.langs i {
	float: left;
	font-size: 18px;
}

.langs a:hover {
	color: #3db5ac;
}
div.mod-languages li{margin-left:0px!important;margin-right:0px!important;}

.langs li::before {
	content: '/';
	display: inline-block;
	color: var(--main-menu-color);
}
.langs li:last-child::before {
	content: "";
}

.langs a{
	color: var(--white-color);
}
.langs a:hover{
	color: var(--second-color) !important;
}


/************************** Member Button *******************************/
.sml-login a{
	padding: 5px 10px;
	margin: 5px 10px;
}

/************************** Member Button *******************************/
.sml-member a{
	padding: 5px 10px;
	margin: 5px 10px;
	background-color: var(--second-color);
	border-radius: 20px;
	color: var(--color-white);
	min-width: 100px;
  display: block;
  text-align: center;
}

.sml-member a span{
	font-weight: bold; 
}

img {max-width: 100%;}
img:hover  {
  /*opacity: 0.3;*/
}

#logo{
	display: block;
	margin: 2px auto;
	height: 100%;
	padding-bottom: 5px;
}
#logo p{
	height: 100%
}
/*
@media (min-width:568px) {
}

@media (max-width:567px) {
	
	.hamburger-pos{
		float: right;
		margin-right: 10px !important;
	}

	.header .hamburger-pos{
		order: 1 !important;
	}

	.header-text{
		font-size: 0.8rem;	
	}

	.header #top-menu, .header .top-menu{
		order: 3 !important;
		flex-basis: 100%;
	}

	.header #top-menu ul, .header .top-menu ul{
		justify-content: center;
	}

	.header #top-menu li a, .header .top-menu li a {
		padding: 5px 10px;
	}
	.header .logo-pos{
		order: 2 !important;
	}

}	
	*/
	.logo-pos{
		display: block;
		flex-basis: 12.5rem;
		flex-grow: 0;
	}


	/******************Top-menu ,  bottom-menu *******************************/
.top-nav {
	background-color: #383E56;
	background-image: url(../img/ferdowsi-pattern-light.png);
	color: #9dacba;
	font-size: 11px;
}
.top-nav a {
	color: #CCD7E0;
}
.nav > li > a:focus, .nav > li > a:hover {
	text-decoration: none;
	background-color: #eee;
}
/*
#top-menu li:last-child::after, .top-menu li:last-child::after {
	content: "";	
}

#top-menu li, .top-menu li{
	position: relative;
}
*/

/*
#top-menu li::after, .top-menu li::after {
	content: "";
	opacity: 0.5;
	background: none;
	height: 2px;
	margin: auto;
	transition: all .2s, red .2s;
	display: block;
	position: absolute;
	bottom: 0;
	right: 50%;
	left: 50%;
}
*/

/*
#top-menu li:hover::after, .top-menu li:hover::after {
  background: var(--top-menu-underline-color);
  right: 0;
  left: 2px;
}


#top-menu li.current::after, .top-menu li.current::after {
  background: var(--top-menu-underline-color);
  right: 0;
  left: 2px;
}


#top-menu, .top-menu {
	padding: 0;
	margin: 0;
	list-style: none;
}
*/
#top-menu ul, .top-menu ul{
	justify-content: center;
}

#top-menu li a , .top-menu li a{
	display: inline-block;
	padding: 10px 10px;

	font-size: 0.9rem;
	font-weight: bold;	
}

/*
#top-menu li a:hover, .top-menu li a:hover,  .top-menu li a:focus {
	background-color: transparent;
}
*/

/********************************************
*
*							Main  -  Section News
*
*********************************************/

.container-fluid {
	max-width: 1248px;
}

.grid-hero{
	position: relative;
  display: grid;  
  column-gap: 32px;
	-moz-column-gap: 32px;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

.grid-hero .grid-hero-featured{
	grid-area: featured;
	/* background-color: red; */
	/* aspect-ratio: 4/3 !important; */
  overflow: hidden;
	height: 100%;
}


@media (min-width: 998px) {
	.grid-hero .grid-hero-featured{
		aspect-ratio: 4/3 !important;
	}
}
/********************* Main Featured Module Details *****************************/
.grid-hero .grid-hero-featured article{
	display: block;
	position : relative;
	height : 100%
}

.grid-hero .grid-hero-featured  a{
	display: block;
	height: 100%;
}


.grid-hero .grid-hero-featured  picture{
	display: block;
	height: 100%;
}

.grid-hero .grid-hero-featured img{
	display : block;
	width : 100%;
	height : 100%;
	object-fit: cover;
	transition: transform .25s ease-in;
  transform: scale(1.02);	
}
.grid-hero .grid-hero-featured img:hover{
	transform: scale(1);
}

.grid-hero-teaser-link::after{
	content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;	
	background: linear-gradient(1turn,#000,#000 52.76%,transparent);
  background: linear-gradient(1turn,#000,rgba(0,0,0,.197) 52.76%,transparent);	
}

.grid-hero-teaser{
	position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  color: #fff;	
}

.grid-hero .grid-hero-bottom {
  grid-area: bottom;
	/* background-color: cornflowerblue; */
	gap: 20px;
}
/********************* Right Featured Module Details *****************************/

.grid-hero .grid-hero-right{
	display: flex;
	/* flex-direction: column; */
	justify-content: space-between;
}

.grid-hero .grid-hero-right article{
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #ccc;
}

.grid-hero-right-author{
	color: var(--light-font2);
	margin-bottom: 10px;
}

.grid-hero-right-publish{
	margin-top: 10px;
}

.grid-hero-right-publish  span:first-child{
	color: var(--second-color);
	display: block;
	font-weight: bold;
}

.grid-hero-right-title h3{
	color: var(--dark-font);
	line-height: 1.7;
	text-align: justify;
}

@media (min-width: 768px) {
	.grid-hero .grid-hero-right{	
		flex-direction: column;
		justify-content: space-between;
	}	
}

@media (max-width:767px) and (min-width:526px){
	.grid-hero .grid-hero-right{	
		flex-direction: row;
		justify-content: space-between;
	}	

	.grid-hero .grid-hero-right article{
		width : 48%;
	}
	.grid-hero .grid-hero-right article a{
		height: 200px;
	}
	.grid-hero .grid-hero-right article img{
		height: 100%;
		width: 100%;
		display: block;	
	}

}

@media (max-width:525px){
	.grid-hero .grid-hero-right{	
		flex-direction: column;
		justify-content: space-between;
	}	
}

picture{
	height: 100%;
  display: block;
}

picture img{
	width:100%
}

/********************* Bottom Featured Module Details *****************************/

.grid-hero .grid-hero-bottom{
	display: flex;
}

.grid-hero .grid-hero-bottom article{
	display: flex;
	flex-direction: column;
	justify-content: end;
	border-bottom: 1px solid #ccc;
	/* width: 33%; */
}

.grid-hero-bottom-author{
	color: var(--light-font2);
}
.grid-hero-bottom-publish{
	margin-bottom: 10px;;
}

.grid-hero-bottom-publish  span:first-child{
	color: var(--second-color);
	font-weight: bold;
}

.grid-hero-bottom-title h3{
	color: var(--dark-font);
}

@media (min-width: 768px) {
	.grid-hero .grid-hero-bottom{
		flex-direction: row;		
	}
}

@media (max-width: 767px) {
	.grid-hero .grid-hero-bottom{
		flex-direction: column;		
	}
}

/********************* Latest News Module Details *****************************/

.latest_news {
  display: grid;  
  gap: 5px;	
	width: 100%;
}


@media (min-width: 1248px) {
  .latest_news {
    grid-template-columns: 1fr;
  }	
	
}

@media (min-width:768px) and (max-width:1247px){
  .latest_news {
    grid-template-columns: repeat(2,1fr);
  }	
	
}

@media (max-width:767px){
  .latest_news {
    grid-template-columns: 1fr;
  }		
}

.grid-hero .grid-hero-latest .latest_news article{
	background-color: #f5f5f5;
	padding: 12px 16px;
  /* margin-bottom: 8px; */
  /* grid-area: news; */
}

.grid-hero .grid-hero-latest .latest_news article  span.title{
	color: var(--dark-font) !important;
	font-weight: bold;
}

.grid-hero .grid-hero-latest .latest_news article  span.jDate{
	color: var(--light-font2) !important;	
}


.grid-hero .grid-hero-latest h2{
	border-top: 3px solid var(--dark-font);
  padding: 10px 0px;
	font-size: 1.3rem;
	color: var(--dark-font);
}

.dark-font{
	color: var(--dark-font);
}

.light-font2{
	color: var(--light-font2);
}

.light-font1{
	color: var(--light-font1);
}

.second-font{
	color: var(--second-font);
}




/**********************************
*
*					Section Quote
*
***********************************/

.grid-quote {
  display: grid;
}

.grid-quote-quote {
  grid-area: quote;	
}

.grid-quote-ad {
  grid-area: ad;
	/* background-color: #E5654C; */
	min-height:100px;
}

.grid-quote-firstRelease {
  grid-area: firstRelease;
	/* background-color: wheat; */
}

@media (min-width: 1248px) {
  .grid-quote {
    -moz-column-gap: 32px;
    gap: 32px;
		grid-template-columns: 1fr 18.75rem;
    grid-template-rows: auto auto;
    grid-template-areas:
"quote        ad" 
"firstRelease ad";
  }
}

@media (min-width:768px) and (max-width:1247px){
  .grid-quote {    
		gap: 20px;
    grid-template-columns: 1fr 18.75rem;
    grid-template-rows: auto auto;
    grid-template-areas:
"quote        ad          " 
"firstRelease firstRelease";
  }
}


@media (max-width:767px){
  .grid-quote {	
		gap: 10px;
  	/* column-gap: .75rem; */
	  /* row-gap: 32px; */
	  /* row-gap: 2rem; */
  	grid-template-areas:
	"quote       " 
	"ad          " 
	"firstRelease";
	}
}

/************************ Quotation ********************************/
.quotation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #f5f5f5;
  padding: 32px 24px;
  transition: all .2s ease-in-out;
}

.quotation-text {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25em;
  letter-spacing: .02em;
  margin-top: 16px;
  margin-bottom: 16px;
}

ul.quotation-source{
	display: flex;
}


.quotation:hover {
  background: #d8d8d8;
}

.quotation-source li:not(:last-child) {
  padding-left: .5rem;
  margin-left: .5rem;
  border-left: .0625rem solid #959595;
  margin-bottom: .25rem;
}

.quotation-source li:first-child > a, ul.quotation-source > a{
	color: var(--second-color);
	font-weight: bold;	
}

.quotation__source li:not(:last-child) {
  padding-left: .5rem;
  margin-left: .5rem;
  border-left: .0625rem solid #959595;
  margin-bottom: .25rem;
}

@media (min-width: 768px) {
  .quotation {
    padding: 32px 48px;
  }

  .quotation-text {
    font-size: 1.3rem;
    line-height: 1.5em;
  }

}

@media (max-width: 768px) {
  .quotation {
    padding: 32px 48px;
  }

  .quotation-text {
    font-size: 1.1rem;
    line-height: 1.5em;
  }

}

/********************************* First Released *********************************/
.grid-quote-firstRelease h2{
	border-top: .25rem solid;
  padding: 18px 0px;
	font-size: 1.2rem;
	color: var(--dark-font);
}

#expandableGrid{
	display: grid;
  overflow: hidden;
	height: 100%;
	transition: max-height 0.5s ease-out;
}

.grid-quote-firstRelease article{
	border-bottom:1px solid #ccc;
	padding-bottom: 10px;
}

#firstRelease-btn{
	width: 200px;
	background-color: white;
	color: var(--second-color);
	border: 2px solid var(--second-color);
	border-radius: 20px;
	padding: 6px;
	font-size: 1rem;
	font-weight: bold;
	transition: background-color 0.2s ease-out;
	margin: 10px;
}

#firstRelease-btn:hover{
	background-color: var(--second-color);
	color: white;
	/* border: 2px solid white; */
}



@media (min-width: 968px) {
  #expandableGrid {
    grid-template-columns: 1fr 1fr 1fr;
		gap: 32px;
  }

	.grid-quote-firstRelease article:not(:nth-child(-n+6)) {
		display:none;
	}
}

@media (min-width:768px) and (max-width:967px){
	#expandableGrid {
    grid-template-columns: 1fr 1fr;
		gap: 32px;
  }

	.grid-quote-firstRelease article:not(:nth-child(-n+4)) {
		display:none;
	}

}

@media (max-width:767px){
	#expandableGrid {
    grid-template-columns: 1fr;
		gap: 20px;
  }

	.grid-quote-firstRelease article:not(:nth-child(-n+4)) {
		display:none;
	}	
}

/*********************************************************************************/
.grid-hero .grid-hero-right {
  grid-area: right;
	/* background-color: darkmagenta; */
	/* min-height: 200px; */
}

.grid-hero .grid-hero-latest {
  grid-area: latest;
	/* background-color: gold; */
	/* min-height: 200px; */
}


@media (min-width: 1248px) {
  .grid-hero {
		row-gap: 32px;		
    grid-template-columns: repeat(12,1fr);
    /* grid-template-rows: 3fr 1fr; */
    grid-template-areas:
"featured featured featured featured featured featured featured right right latest latest latest" 
"bottom   bottom   bottom   bottom   bottom   bottom   bottom   right right latest latest latest";
  }	
	
}

@media (min-width:768px) and (max-width:1247px){
	.grid-hero {
    row-gap: 32px;
    grid-template-columns: repeat(6,1fr);
    grid-template-areas:
"featured featured featured featured right  right " 
"bottom   bottom   bottom   bottom   bottom bottom" 
"latest   latest   latest   latest   latest latest";
  }	
}

@media (min-width:526px) and (max-width:767px){
	.grid-hero {
		row-gap: 20px;
		grid-template-columns: 1fr;
		grid-template-areas:
	"featured" 
	"right   " 
	"bottom  " 
	"latest  ";
	}	

}


@media (max-width:525px){
	.grid-hero {
		row-gap: 12px;
		grid-template-areas:
	"featured" 
	"right   " 
	"bottom  " 
	"latest  ";
	}	
	.grid-hero .grid-hero-featured{
		width: 100%;
	}	
}




/*********************** 
*
* 	Journals  ShowCase
*
*************************** */

#sec-journals{
	padding: 30px 0px;
}

/*********************** ** 	Journal  Carousel ** ************************** */

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
	display: flex;
}


@media (min-width:526px) {
	
	.carousel-inner .carousel-item-right.active,
	.carousel-inner .carousel-item-next {
		transform: translateX(-16.66%);
	}
	
	.carousel-inner .carousel-item-left.active, 
	.carousel-inner .carousel-item-prev {
		transform: translateX(+16.66%);
	}
}

@media (max-width:525px) {
	
	.carousel-inner .carousel-item-right.active,
	.carousel-inner .carousel-item-next {
		transform: translateX(-20%);
	}
	
	.carousel-inner .carousel-item-left.active, 
	.carousel-inner .carousel-item-prev {
		transform: translateX(+20%);
	}
}

.carousel-inner .carousel-item-right, 
.carousel-inner .carousel-item-left{ 
transform: translateX(0);
}  




.journals-showcase-slideshow .journalItem .underline-container {
	position: relative;
	margin-bottom: .875rem;
}

.journals-showcase-slideshow .journalItem .underline-container:hover {
	cursor: pointer;
}

.journals-showcase-slideshow .journalItem .underline-container::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  left: 0;
  bottom: -14px;
  bottom: -.875rem;
  transition: height .12s ease-out;
  background: #ca2015;
}

.journals-showcase-slideshow .journalItem .underline-container.active::after, 
.journals-showcase-slideshow .journalItem .underline-container:hover::after {
  height: 6px;
  height: .375rem;
}

.journal-cover{
	width: 100%;
	aspect-ratio: 3/4;
	

	/* width: 6rem;
	height: 7.625rem; */
}

@media (min-width:1248px){
	.journals-showcase-slideshow .container-fluid{
		padding: 0px 250px;
	}

	.journals-showcase-slideshow .container-fluid{
		.carousel-item .journalItem{
			padding: 0px 15px;
		}
	}

}

@media (min-width:992px) and (max-width:1247px){
	.journals-showcase-slideshow .container-fluid{
		padding: 0px 150px;
	}

	.journals-showcase-slideshow .container-fluid{
		.carousel-item .journalItem{
			padding: 0px 5px;
		}
	}

}


@media (min-width:576px) and (max-width:768px){
	.journals-showcase-slideshow .container-fluid{
		/* padding: 0px 100px; */
	}
	.journals-showcase-slideshow .container-fluid{
		.carousel-item .journalItem{
			padding: 0px 5px;
		}
	}

}

@media (max-width:575px){
	.journals-showcase-slideshow .container-fluid{
		.carousel-item .journalItem{
			padding: 0px 2px;
		}
	}
}


.journals-showcase-item{
	position: relative;
}

.journals-showcase-item .parallax img {
	height: 224px;
	width:100%;
	object-fit: cover;
}

.parallax{
	position: absolute;
  overflow: hidden;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  pointer-events: none;	
}

.parallax + .container-fluid{
	position: relative;
	top: 170px;
  padding-bottom: 170px;
	opacity : 1;
	background-color: #fff;;
}

.journal{
	padding: 64px 30px 30px 20px;
}

@media (min-width:576px){
	.journal .head{
		flex-direction: row;		
	}
}


@media (max-width:575px){
	.journal .head{
		flex-direction: column;		
	}
}

.journal .head{
	display: flex;	
	align-items: baseline;
	border-top : 4px solid var(--main-color);
	padding-top:20px;
}



.journal .head h2{
	font-size: 2rem;
	color: var(--dark-font);


	margin-left: 3rem;
}
.journal .head ul{
	display: flex;
  flex-direction: row;
}

.journal .head li:not(:last-child)::after {
  content: "|";
  margin-right: .225rem;
  margin-left: .5rem;
  display: inline-block;
}

.journal .head li span{
	padding: 5px;
}






@media (min-width:576px){
	.journal .body{
		flex-direction: row;		
	}
}


@media (max-width:575px){
	.journal .body{
		flex-direction: column;		
	}
}

.journal .body{
	display: flex;	
	align-items: flex-start;
	padding-top:20px;
}

.journal .journal-cover{
	width: 100%;
	max-width: 300px;
	height: auto;
}

.journal  .journal-cover  img{
	aspect-ratio: 3/4;
	object-fit: cover;
	width: 100%;
	padding-left : 50px;
}

.journal-article{
	padding: 20px 0px 20px 0px;
	border-bottom: 1px solid #ccc;
}
.journal-articles h6{
	font-size: 0.9rem;
  line-height: 1.5rem;
}

.meta{
	display: flex;	
	flex-direction: row;
	align-items: flex-start;
}

.meta .article-type{
	color: var(--second-font);
	padding-left: 2rem;
}

.meta ul{
	margin : 0px;
}


/************************************************
*
*					Footer
*
************************************************/

/******** flash effect ************/
.hover13:hover {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

/************************************************
*
*					Footer
*
************************************************/
.footer{
	margin-top : 30px;
}

.footer .footer-top div{
	display: block;
	height: 80px;
	background-color: var(--dark-font);
}

.footer .footer-middle {
	background-color: var(--footer-top-color);
	height: 600px;
}

/**********************************************************************************/

.overflow-hidden {
  overflow: hidden !important;
}

.animation-image-scale-down{
	transition: transform .25s ease-in;
  transform: scale(1.02);	
}
.animation-image-scale-down:hover{
	transform: scale(1);
}

.animation-underline{
  text-decoration: none;
  background-image: linear-gradient(var(--second-color),var(--second-color));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 0;
  transition: background .5s ease-in-out;
}

.animation-underline:hover{
	text-decoration: none;
  background-position: 0 100%;
  background-size: 100% 1px;
}






	.arm {
		position: absolute;
		/* top: 13%; */
		right:0%
		/* margin: auto; */
	}
	
	@media (max-width: 600px) {
		#fum-logo, #fum-logo2 {
			width:250px;
		}
		#boombox-fum-logo{
			width:250px;
		}
		.arm {
			top: 30%;
			/* margin: auto; */
		}

	}
	
	@media (min-width: 600px) {
		#fum-logo , #fum-logo2{
			width:550px;
		}
		#boombox-fum-logo{
			width:300px;
		}
		.arm {
			top: 13%;
			/* margin: auto; */
			width: 60%;
		}
	}
	

	@media (max-width:599px) {
		#fum-logo2{
			width: 80px;
  		position: absolute;
  		top: -10%;
	  	right: 2%;
		}
	}

	@media (min-width:600px) and (max-width:767px){
		#fum-logo2{
			width: 110px;
  		position: absolute;
  		top: 5%;
	  	right: 6%;
		}
	}
	
	@media (min-width:768px) and (max-width:991px){
		#fum-logo2{
			width: 140px;
  		position: absolute;
  		top: 5%;
	  	right: 6%;
		}
	}
	@media (min-width:992px) and (max-width:1399px){
		#fum-logo2{
			width: 150px;
  		position: absolute;
  		top: 5%;
	  	right: 15%;
		}
	}

	@media (min-width:1400px){
		#fum-logo2{
			width: 150px;
  		position: absolute;
  		top: 5%;
	  	right: 20%;
		}
	}

	#fum-logo, #fum-logo2{
		display: block;
		margin:auto;	
	}

	#boombox-fum-logo{
		display: block;
		margin:auto;	
		opacity: 0.7;
	}
	
	#eng-logo{
		display: block;
		width:300px;
	}
	


/****************/
.date.btn, .sites-list.btn {
	padding: 9px 16px;
	border: 1px solid #9dacba;
}
.btn.bg-green {
	background: #0098a5 !important;
	border-color: #0098a5 !important;
	color: #fff;
	cursor:pointer;
}
.sites-list.btn {
	font-size: 11px;
	font-weight: normal;
}

/******************Logo*******************************/
.logo {
	margin: 1px 0;
}
.logo:hover {
	opacity: .8;
}
.slogan {
	margin: 15px 10px;float:left;
}
.slogan img {
	filter: opacity(0.4);
	transition: all 0.5s;
}
.slogan img:hover {
	filter: opacity(1);
}
/******************Slider*******************************/

/*#sp-slider {
	margin-bottom: 10px;
}*/
.djslider-loader img:hover {
	opacity: 1;
	}
.prev, .next {
  
  width: auto;
  margin-top: 5%;
  padding: 50px 12px;
  color: white !important;
  transition: 0.6s ease;
  /*border-radius: 0 3px 3px 0;*/
  user-select: none;
  background-color:rgba(0,0,0,0.3);
}

.next {

  border-radius: 3px 0 0 3px;
  margin-right:-5px;
}
.prev {

  border-radius: 0 3px 3px 0;
  margin-left:-5px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.9);
}


/***/
.slide-desc-bg{background:none;}
.slide-desc-text{text-align:justify;}
.slide-desc {
	z-index: 2;
	max-width: 450px;
	color: rgb(255, 255, 255);
	background: rgba(185, 163, 152, 0.5) none repeat scroll 0% 0%;
	padding: 10px 20px;
	border-radius: 5px;
	top: 174px;
	min-height: 0px;
	min-width: 0px;
	line-height: 24px;
	border-width: 0px;
	margin: 0px;
	letter-spacing: 0px;
	font-size: 13px;
	left: 916.5px;
	visibility: visible;
	opacity: 1;
	transform: translate3d(0px, 0px, 0px);
}
/***/
.sidebar{margin-bottom:30px;}
#sp-main{margin-top:0px;}
/*****************aidanews2**********************/
.aidanews2_line{
    border-bottom: 0px solid #cccccc !important;
}
.aidanews2 img{border:solid 0px #ccc;}
.aidanews2_table .aidanews2_tabrow .aidanews2_art{
 border-bottom:0px solid #cccccc !important;
 border-right:0px solid #cccccc !important;
 border-top:0px solid #cccccc !important;
 border-left:0px solid #cccccc !important;
 float:right !important;
}

.aidanews2 .even{background-color: white !important;}

 .aidanews2_text {
     display: block;
     font-size: 12px;
     margin-top: 5px;
    line-height:20px;
    color:#999;
    text-align:justify;
}
.aidanews2_date i {
	font-size: 12px;
	padding-left: 5px;
}
#sp-sidebar .aidanews2_date i {
	font-size: 10px;
	padding-left: 5px;
}
.aidanews2_date{color:#999;}
.aidanews2_art{margin-top:5px;}
.aidanews2_mainC{overflow:hidden!important;padding-right:10px;}
.aidanews2_title{
   display:flex!important;
   font-size:12px!important;
   line-height:1.5!important;
}
.aidanews2_bottomlink:hover {opacity: 0.6;}

.aidanews2_bottomlink {
      /* position:absolute;*/
	background: #013473;
	border-radius: 3px !important;
        float:left;
        padding: 2px 5px 2px !important;
}
.aidanews2_bottomlink a{color:#fff;font:normal 10px "IRANSans" !important}
#sp-sidebar .aidanews2_bottomlink {position:absolute;top:0px;left:0px;}
#sp-events .aidanews2_bottomlink {position:absolute;top:10px;left:0;}
#sp-near-events .aidanews2_bottomlink {position:absolute;top:-4px;left:15px;}
#sp-events .aidanews2_art{margin-top:20px;}
/**/
.aidanews2_mystyle .aidanews2_title a:link {
	font-weight: normal;
}
.aidanews2_mystyle .aidanews2_art {
    background-color: #f2f4f8;
    color: #0b486b;
    font-size: 12px;
    padding:5px;

}
.aidanews2_mystyle .aidanews2_art  {
  opacity: 1;
  transition: 0.3s;
}

.aidanews2_mystyle .aidanews2_art:hover,.latestnews li:hover {opacity: 0.7}
.aidanews2_mystyle .aidanews2_date  {
	color: #fff;
	font-size: 10px;
	bottom: -3px;
	left: 10px;
	border-radius: 3px;
	padding: 0 5px;
        background:#999;
}

/**/
.aidanews2_firstnews .aidanews2_title{margin:5px 0 10px;}
.aidanews2_firstnews .aidanews2_mainC{padding-right:30px;}
.aidanews2_firstnews .aidanews2_text{margin-top:20px;}
/**/
.latestnews li {
	background-color: #f2f4f8;
	font-size: 12px;
	padding: 10px;
	margin-top: 6px;

}

/******************gkTabsWrap*********************/
.gkTabsContainer, .gkTabsContainer[style] {
	overflow: visible !important;
	overflow-x: visible !important;
	overflow-y: visible !important;

}
.gkTabsWrap.vertical ol li.active, .gkTabsWrap.horizontal ol li.active, .gkTabsWrap.vertical ol li:hover, .gkTabsWrap.horizontal ol li:hover{
    border-bottom: 1px solid  var(--main-menu-color) !important;
    border-right: 0px solid #eeeeee !important;
}
.gkTabsWrap.vertical ol li, .gkTabsWrap.horizontal ol li{
    top:3px;font-size:1rem;    border-right: 0px solid #eee !important;
}
.gkTabsWrap.vertical ol li, .gkTabsWrap.horizontal ol li{
       float: right !important;color:#013473 !important;font-weight: bold;
       border-bottom: 0px solid #45ada8 !important;margin-left: 20px !important;padding-right: 0px !important; padding-bottomt: 7px !important;
      
   }
   .gkTabsWrap.vertical ol, .gkTabsWrap.horizontal > ol{
       border-bottom: 0px solid #eeeeee !important;
   }
   .gkTabsWrap.vertical ol li::before, .gkTabsWrap.horizontal ol li::before, .latestnews li::before{
       display: none !important;
     
       
   }
.gkTabsWrap.vertical ol li{
	border-bottom: 0px solid #eee !important;
}   
/******************gkTabsWrap*********************/
.main-title {
	border-bottom: 1px solid #eee;
	/*position: relative;*/
	color: #383E56;;
	margin-bottom: 15px;
}
.main-title h3 {
	margin: 0 0 -1px;
	padding-bottom: 7px;
	border-bottom: 1px solid #FA744F;
	display: table;
         font-size:1rem;
}
/******************************************/
#sp-sidebar ul li::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: #0097a4;
	border-radius: 10px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #0097a4;
	margin-left: 8px;
}

 .widget {
	padding: 20px 20px 10px 20px;
	background-color: #f2f4f8;
	 margin-bottom: 5px;

 }
/*********Events*************/
.aidanews2_date_roydad {
	font-size: 20px !important;
}
.aidanews2_date_roydad span {
	display: block;
	font-size: 11px;
}
.bg-orange{background-color:red;}
.bg-green{background-color:#0098a6 !important;}
.bg-gray{background-color:gray;}
span.aidanotifier_new, span.aidanotifier_feat, span.aidanotifier_upd, span.aidanotifier_reg{background:#ff7f00 !important;}

.aidanews2_roydad .aidanews2_title a{
       font-size: 13px;
       color: #0b486b;
        font-weight: 500;
}
.aidanews2_roydad .aidanews2_title a:hover{color:#3db5ac;}
/*********Pos1-4*************/
.box {
	background-size: cover;
	/*height: 220px;
	margin-bottom: 30px;*/
	position: relative;
}
.box .text-overlay {
	background: var(--main-menu-header-rgba-color2);/*#696969;*/
	color: white;
	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	text-align: center;
	font-size: 15px;
	margin: 0;
	font-weight: 500;
	filter: none;
	opacity: 0.7;
}
.box .text-overlay  {
	padding: 15px;
	transition: padding 0.1s;
}
.box .text-overlay:hover,.box:hover .text-overlay  {
	padding-bottom: 50px;
	color: white;

}
.box .text-overlay:hover {
	opacity: .8;
}
.box img:hover{opacity:1;cursor:pointer;}

/***********Services-section****************/
#services-section {
	background: #f2f4f8;
	padding: 40px 0;
	border-bottom: 2px solid #ddd;
        
}
.services > div {
	border-left: 1px solid #e7e8ea;
}
[class*="-sicon"] {
	background-image: url(../img/sprite.png);
	display: inline-block;
	vertical-align: middle;
}
.list-links {
	text-align: center;
	display: block;
}
.list-links i {
	margin-bottom: 12px;
}
.pooya-sicon {
	background-position: -37px 0;
	width: 22px;
	height: 28px;
	display: block;
	margin: 0 auto;
}
.title-links {
	font-size: 13px;
	color: var(--footer-border-color2);/*#FA744F;*/
	display: block;
	font-weight: bold;
}
.text-links {
	font-size: 11px;
	color: #999;
	display: block;
}
.list-links:hover {
	opacity: .7;
}
.pooya-sicon {
	background-position: -37px 0;
	width: 22px;
	height: 28px;
	display: block;
	margin: 0 auto;
}
.email-sicon {
	background-position: -82px 0;
	width: 28px;
	height: 21px;
	display: block;
	margin: 0 auto;
}
.sadaf-sicon {
	background-position: -111px 0;
	width: 28px;
	height: 28px;
	display: block;
	margin: 0 auto;
}
.scientific-publications-sicon {
	background-position: -140px 0;
	width: 30px;
	height: 26px;
	display: block;
	margin: 0 auto;
}
.knowledge-sharing-sicon {
	background-position: -170px 0;
	width: 31px;
	height: 27px;
	display: block;
	margin: 0 auto;
}
.correspondence-sicon {
	background-position: -59px 0;
	width: 23px;
	height: 27px;
	display: block;
	margin: 0 auto;
}
/***********Footer****************/

.main-footer {

	color: #fff;
	/*margin-top: 60px;*/
	z-index: 1;
  	position: relative;

}
/*
.footer-content::before{
		position: fixed;
		background-image: url("../img/gear-pattern.png");
		--background-overlay: '';
		background-color: red;
		background-repeat: repeat;
		background-size: 5% auto;
		z-index: 2;
}
*/
.footer-content{
	background-image: radial-gradient(at center center, #111 0%, #000 100%);
}
/*
.main-footer::before{
	background-image: url(../img/footer_texture.png);
    --background-overlay: '';
    background-repeat: repeat;
    background-size: 5% auto;
  }
*/


.footer-content {
	/* padding: 150px 50px 10px 50px; */
	line-height: 24px;
	border-top: 7px solid var(--footer-border-color);
	border-bottom: 7px solid var(--footer-border-color);
}
}
.main-footer h4{font-size: 1rem;}
.main-footer ul li::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: var(--footer-border-color);/*#0097a4;*/
	border-radius: 10px;
	/* border: 2px solid var(--main-menu-color); */
	box-shadow: 0 0 0 1px var(--footer-border-color)/*#0097a4*/;
	margin-left: 8px;
}
.footer-content a {
	color: #b8ced9;
}
.footer-content a:hover {
	color: #fff;
}
/*
div:has(> div.footer-1) , div:has(> div.footer-2), div:has(> div.footer-3) , div:has(> div.footer-4){
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
*/

/************************* uni tamadon **********************************/

.footer-header{
	/* position: absolute;
	top: 0px;
	left: 50%; */
	/* transform: translate(50%, 0%); */
	margin-top: 150px;
}
@media screen and (min-width:767px){
	.uni_tamadon{
		width: 50%;
	}	
	.footer-header{
		/* border-bottom: 4px solid var(--footer-border-color); */
	}
	.footer-content {
		padding: 150px 50px 50px 50px;
	}	
	
}

@media screen and (max-width:768px){
	.uni_tamadon{
		width: 200px;
	}	
	.footer-header{
		/* border-bottom: 3px solid var(--footer-border-color); */
	}
	.footer-content {
		padding: 80px 50px 10px 50px;
	}	
	
}

.uni_tamadon{
	display: block;
  margin: auto;
	position: absolute;
  transform: translate( -50%, -50%);
}


div:has(.footer-1){
	/* display: flex;
  flex-direction: column;
  justify-content: center;	 */
}
.footer-4{
	margin: 0;
	/*
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	*/
}



@media (max-width:575px){
	.footer-1 img	{
		max-width: 200px
	}

	.footer-4 img	{
		max-width: 200px
	}

}


@media (min-width:576px) and (max-width:767px){
	.footer-1 img	{
		max-width: 300px
	}

	.footer-4 img	{
		max-width: 300px
	}

}


@media (min-width:768px) and (max-width:991px){
	.footer-1, footer-2, footer-3, footer-4{
		margin-bottom: 20px;
	}

	.footer-1 img	{
		max-width: 200px
	}

	.footer-4 img	{
		max-width: 200px
	}

}

@media (min-width:992px){}
/********************* Divider ************************/
.fancy-divider{
		--b: 4px;   /* control the border thickness */
		--w: 80px;  /* control the width of the line*/
		--g: 15px;  /* control the gap */
		--c: var(--footer-border-color);/*#0B486B;*/
	 
		width: fit-content;
		padding: 0 1em;
		line-height: 1.6em;
		border: 1px solid;
		color: #fff;
		background: 
			conic-gradient(from   45deg at left ,var(--c) 25%,#0000 0) 0,
			conic-gradient(from -135deg at right,var(--c) 25%,#0000 0) 100%;
		background-size: 51% 100%;
		background-origin: border-box;
		background-repeat: no-repeat;
		border-image: 
			 linear-gradient(
				 #0000      calc(50% - var(--b)/2),
				 var(--c) 0 calc(50% + var(--b)/2),
				 #0000    0) 
			1/0 var(--w)/calc(var(--w) + var(--g));
		margin-inline: auto;

}


.title-divider{
	display: flex;
	text-align: center;
  padding-block-start: 15px;
  padding-block-end: 15px;
}

.title-divider-seperator{
	display: flex;
  margin: 0;
  direction: ltr;

	width: 100%;
  margin: 0 auto;
	align-items: center;
}

.title-divider-seperator::before, .title-divider-seperator::after{
	display: block;
  content: "";
  border-block-end: 0;
  flex-grow: 1;
  border-block-start: var(--divider-border-width) var(--divider-border-style) var(--divider-color);	
}

.title-divider-text{
	color: var(--main-menu-color);  
  font-size: 1.3rem;
  font-weight: 500;
  text-transform: none;
  line-height: 1.5em;
}

.title-divider-text i{
	font-size: 1rem;
	color: var(--footer-border-color);
}
/***********Copyrights****************/

.copyrights {
	/*border-top: 1px solid #234;*/
	font-size: 11px;
	color: #a3c0d0;
	padding: 10px 0;
	/*background-image: url(../img/footer-pattern.png);*/

}

/***********Contact****************/
.contact-info {
	list-style: none;
	font-size: 11px;
	padding: 0 10px !important;
	margin: 10px 0 !important;
}
.contact-info i {

	font-size: 15px;
	margin-left: 5px;
	text-align: center;
	min-width: 15px;
    color:var(--footer-border-color);/*#FA744F;*/
}
.contact-info li::before,.afix-social-icons li::before {
	display: none !important;
}
.btn.bg-red {
	background: var(--footer-border-color);/*#e5654c !important;*/
	border-color: var(--footer-border-color2);/*#ce5b44;*/
	color: #fff;
}
.btn-118 {
	padding: 0;
	overflow: hidden;
	line-height: 40px;
}
.btn-118 span {
	background-color: var(--footer-border-color2);/*#ce5b44;*/
	height: 40px;
	width: 50px;
	display: block;
	float: right;
	padding: 10px;
	line-height: 0;
}
.btn i {
	font-size: 17px;
	vertical-align: middle;
}
.phonebook-sicon {
	background-position: -201px 0;
	width: 19px;
	height: 20px;
}
/***********SEARCH****************/
.nav-search:focus {
	width: 100%;
}
.nav-search.search-open {
	width: 250px;
	background-color: #fff;
	color: #333;
}
.nav-search {
	float: left;
	border: 1px solid #fff;
	border-radius: 50px;
	width: 33px;
	height: 33px;
	color: #fff;
	overflow: hidden;
	margin-top: 10px;
	-webkit-transition: 200ms all ease;
	-o-transition: 200ms all ease;
	transition: 200ms all ease;
	position: absolute;
	top: 0;
	left: 3px;
	z-index:10;
}
.parent-search {
	width: 250px;
	float: left;
}

.nav-search input {
	height: 31px;
	padding: 5px 10px 5px 0;
	line-height: 1.5;
	width: 180px !important;
}
.parent-search > i {
	float: left;
	line-height: 2.3;
	cursor: pointer;
	width: 32px;
	text-align: center;
}

.nav-search button {
	height: 31px;
	width: 31px;
	padding: 0;
	line-height: 0;
	display: block;
}
.nav-search input, .nav-search button {
	background: transparent;
	border: 0 none;
}
.nav-search button:hover {
	opacity: .7;
}

.subdomain-list {
	background-color: #ddd;
	padding: 10px 0 30px;
	display: none;
}
.close-subdomain:hover {
	color: #EF4423;
}
.close-subdomain {
	height: auto;
	line-height: unset;
	color: #E5654C;
	font-size: 20px;
	position: absolute;
	left:120px;
	top: 10px;
	cursor: pointer;
	z-index: 10;
}
.subdomain-list h3{	font-size: 15px;color:#9dacba;}
.hod {
	float: left;
}
/***********panel1 ,panel2****************/

#panel2{overflow:hidden;}
/*#sp-panel2 img{
border:1px solid;
border-radius: 5px;
}*/
#panel1 li {
	background: #0b486b;
	padding: 15px;
	margin-bottom: 5px;
	border-radius: 5px;
}
#panel1 li a, #panel1 li span {
	color: #fff;
	font-weight: 900;
}
#panel1 li a::before {
	content: "\f35d";
	display: inline-block;
	font-family:"Font Awesome 5 Free";
	color: #fff;
	margin-left: 5px;
}
#panel1 li:hover {
	opacity: 0.6;
}
.breadcrumb-wrap{padding-bottom:10px;}
.varight {
	text-align: right !important;
}
.vacenter {
	direction: ltr !important;
}

table.mvc_peopleTable  i.fa-user-friends{
	/* color: var(--footer-border-color) !important; */
}

.vvisit_counter .vrow {
	display:block ;
}
.pagination{margin-top:10px;}
.pagination .counter{margin-left:10px;}
.pagination li::before{display:none !important;}
.pagination li {
	padding: 0 8px;
	text-decoration: none;
	border: 1px solid #eee;
	color: #5F5F5F;
	background-color: #fff;
        float:right;
}
/****************************************/
#myInput {
	background-image: url('/css/searchicon.png'); /* Add a search icon to input */
	background-position: 10px 12px; /* Position the search icon */
	background-repeat: no-repeat; /* Do not repeat the icon image */
	width: 100%; /* Full-width */
	font-size: 16px; /* Increase font-size */
	padding: 12px 20px 12px 40px; /* Add some padding */
	border: 1px solid #ddd; /* Add a grey border */
	margin-bottom: 12px; /* Add some space below the input */
}

#myTable {
	border-collapse: collapse; /* Collapse borders */
	width: 100%; /* Full-width */
	border: 1px solid #ddd; /* Add a grey border */
	font-size: 18px; /* Increase font-size */
}

#myTable th, #myTable td {
	text-align: left; /* Left-align text */
	padding: 12px; /* Add padding */
}

#myTable tr {
	/* Add a bottom border to all table rows */
	border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
	/* Add a grey background color to the table header and on hover */
	background-color: #f1f1f1;
}

.parent-search i {
	line-height: 2.3;
	cursor: pointer;
	width: 32px;
	text-align: center;
}
.archive{
	
	/*background: #013473;
	border-radius: 3px !important;
	float: left;
	padding: 2px 5px 2px !important;*/
	text-align: left;
}
.archive a {
	padding: 4px 12px;
	font-size: 10px;
	background: #FA744F;
	color: #fff;
	border-color: #FA744F;
	border-radius: 3px;
}
#sp-sidebar .evofp-date-author {
	color: #fff;
	font-size: 10px;
	bottom: -3px;
	float: left;
	left: 10px;
	border-radius: 3px;
	padding: 0 5px;
	background: #999;
}
.evofrontpage-tabbed-no-effect .head{
	border-top:0px !important;
}
.evofrontpage-tabbed-no-effect .evofp-table-cell-body{
	border-bottom:0px !important;
}
.evofrontpage-tabbed-no-effect .evofp-table-cell{
	text-align: right !important;
}
.evofrontpage-tabbed-no-effect .title{
	font-size:100% !important;
}
/*****************************************/
@media screen and (max-width:1199px){.menu-bar::after, .menu-bar::before{border-width:0 !important;}
}
@media screen and (max-width:991px){.services > div{margin-bottom:20px;}
}
@media screen and (max-width:767px){
	.aidanews2_art{width:100% !important;}
	.gkTabsWrap.vertical ol li, .gkTabsWrap.horizontal ol li{font-size:13px;}
	.main-title h3{font-size:13px;}
	.aidanews2_firstnews .aidanews2_mainC{display:inline-block;padding-right:0px;}
	.lightface{display:none;}/*popup*/
	.fix-header {/*display: none !important;*/	}
}
@media screen and (min-width:576px){#sp-pos1{padding-right:0px;}
	#sp-pos4{padding-left:0px;}
}
@media only screen and (max-width:976px){.prev, .next{padding:30px 9px;margin-top:3%;}
}
@media screen and (max-height:450px){.sidenav{padding-top:15px;}
	.sidenav a{font-size:18px;}
}


/******************* Video **********************/

@media screen and (max-width:577px)
{
	#videowrapper{  
		height: 100vh;
	}

	#fullScreenDiv{
		height: 50vh;
	}		

	#video{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}

@media (min-width:576px) and (max-width:766px)
{
	#videowrapper{  
		height: 100vh;
	}

	#fullScreenDiv{
		height: 50vh;
	}		

	#video{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}

@media (min-width:767px) and (max-width:991px)
{
	#videowrapper{  
		/* height: 100vh; */
	}

	#fullScreenDiv{
		/* height: 50vh; */
	}		

	#video{
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

	#main{
		margin-top: 0px;
	}
}

/*
#videowrapper::before{
	position: fixed;
	background-image: url("../img/gear-pattern.png");
  --background-overlay: '';
  background-color: red;
  background-repeat: repeat;
  background-size: 5% auto;
  z-index: 2;
}
*/
@media (min-width:992) 
{
	#fullScreenDiv{
		height: 100vh;
	}	

	#videowrapper{  
		position: relative;
		overflow: hidden;
	} 

	#fullScreenDiv{
		min-height: 100%; 
		height: 100vh;
		width: 100vw;
	}
/*
	#video::before{
		position: fixed;
		background-image: url("../img/gear-pattern.png");
	  --background-overlay: '';
	  background-color: red;
	  background-repeat: repeat;
	  background-size: 5% auto;
	  z-index: 2;
	}
*/
	#video{    
		width: 100vw; 
		height: 100vh; 
		margin: auto;
		display: block;
	}

	#main{
		margin-top: 20px !important;
	}

}
/*
@media (min-aspect-ratio: 16/9) {
#video{
	width: 100vw; 
	height:auto;
}
}

@media (max-aspect-ratio: 16/9) {
#video {
	height: 100vh; 
	width:auto;
	margin-left: 50vw;

}
}
*/

#videoMessage{
	width: 100%; 
	height: 100%;
	position: absolute; 
	top: 0; 
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.styling *{ margin:0.2em; text-align:center;color:#ffffff;}
.styling h1{font-size: 3em; text-shadow: 2px 2px 2px #000000;}
.styling h2{font-size: 1.5em;}
.styling h3{font-size: 1.2em;}
.videoClick a{padding:0.2em 0.5em;
    border-radius:0.5em;
    color:white;background-color:rgba(250,116,79, 0.8);
    font-size: 1.7em;
    cursor:pointer;cursor:hand;
}

/******************************** khajenejad *******************************/
.toggle-menu{
	display:block;
	float: right;
	width:30px;
	height: 30px;	
	background-size: 30px 30px;
	/*-webkit-mask-image: url('../icons/icons8_menu.svg');*/
	background-image: url( '../icons/icons8_menu.svg' );
	margin: 10px;
}
/**************************************************/

.toggle-menu {

	background-color: transparent; /* رنگ پس‌زمینه اولیه */
	color: black; /* رنگ متن */
	transition: color 0.3s ease; /* انیمیشن برای تغییر رنگ متن */
	/* z-index: 1; برای قرار دادن عنصر بالای پس‌زمینه */
	position: relative;
}

.toggle-menu::before {
	content: ""; /* برای ایجاد یک عنصر خالی */
	position: absolute; /* قرار دادن در موقعیت مطلق */
	top: -5px; /* موقعیت بالا */
	left: -5px; /* موقعیت چپ */
	right: -5px; /* موقعیت راست */
	bottom: -5px; /* موقعیت پایین */
	background-color: #eee; /* رنگ پس‌زمینه */
	opacity: 0; /* شروع با شفافیت صفر */
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3 ease, color 0.3 ease; /* انیمیشن برای تغییر شفافیت */
	z-index: -1; /* قرار دادن پس‌زمینه زیر عنصر */
	border-radius: 50%;
	width: 40px;
	height: 40px;
	/* margin:5px; */
	transform: scale(0);
}

.toggle-menu.lightface::before {
	background-color: #333 !important; 	
}


.toggle-menu:hover::before {
	opacity: 1; /* وقتی ماوس روی عنصر است، شفافیت به 1 تغییر می‌کند */
	transform: scale(1);
}


.toggle-menu.lightface.over-light::before{
	background-color: red !important; 	
	opacity: 1 !important;
  transform: scale(1) !important;
}

.toggle-menu.darkface.over-dark{
	background-image: url( '../icons/icons8_menu_red.svg' );
}

.toggle-menu:hover {
	/* color: white; تغییر رنگ متن وقتی ماوس روی عنصر است */
}
/****************************************************/


.toggle-menu.darkface{
	background-image: url( '../icons/icons8_menu.svg' );
}

.toggle-menu.lightface{
	background-image: url( '../icons/icons8_menu_light.svg' ) !important;
}


.toggle-menu:hover{
	cursor:pointer;	
}


.toggled-right-panel{
	display: flex;
	flex-direction: column;
	align-content: flex-start;
	width: 0px;
	height:100vh;
	background-color: #fff;/*rgba(250,116,79,0.9);*/
	position: fixed;
	z-index:9999999;
	overflow: hidden;
	transition:  0.5s ease-in;
	/* transition: 0.5s cubic-bezier(0, 1, 0.5, 1);	 */
	color:#777 !important;
	/* top:0px; */
	overflow: scroll;
}

.toggled-right-panel a{
	color:#fff !important;
}

.toggled-right-panel a::after{
	color:#fff !important;
}

.right-panel-top{
	height:76px;
}


.right-panel-middle-b{
	/*padding: 20px 10px;*/
	flex-grow:1;
}

/*
.right-panel-middle-b li{
	font-size:1rem;
	line-height: 2rem;	
}
*/
.right-panel-middle-b li span::after { 
	border-color: transparent #fff transparent transparent !important;
	color: #fff !important;
}


.right-panel-bottom{
	padding : 20px;
}

#right-panel-bottom i{
	transition: 0.5s;
}

#right-panel-bottom i:hover{
	color:#ccc !important;	
	font-weight: bold !important;
}

.toggled-right-panel-show{
	width: 300px;
	transition:  0.5s ease-in;
}


#overlay{
	background-color: rgba(0, 0, 0, 0.63);
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 99999;
    display: none;
}

#overlay.top{
	top : 70px !important;
}

.dark{
    background : #000 !important;
    opacity    : 0.9;
    filter     : alpha(opacity=60);	
}
/**************************Card News*************************************/
.card.news{
	margin: 5px 1px;
	height:100%;
}
.card.news img{
	object-fit: cover;
	height:40%;
}

.card.news p {
	text-align: justify;
}


/******************************Boom Box**********************************************/
.boom-box{
	width: 100vw;
    box-sizing: border-box;
    margin: 40px auto 0;
    right: 50%;
    margin-right: -50vw;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background-image: url(../img/college_building.jpg); */
		background-color: #0098a5;
    background-attachment: fixed;
    z-index: 10;
    display: flex;
    position: relative;
    height: 400px;
    padding: 30px;
}

.boom-box::before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--boombox-bg-color);/*rgba(28,49,68, 0.7);*/ /*var(--main-menu-header-rgba-color);/*#0e324dc2;*/
    position: absolute;
    z-index: 0;
}

.boom-box .wrapper {
    display: inline-flex!important;
    justify-content: center;
    align-items: center;
		width: 100%;
}
/*
.wrapper {
    display: flow-root;
    max-width: 1280px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 20px;
}
*/

.boombox-right ,  .boombox-left{
	color: #fff;
	font-size: 1.1rem;
	line-height: 2rem;
	text-align: justify;
}

.boombox-left {
	color: #fff;

}

.boom-box .wrapper .boom-box-content{
	display: flex;
/*	flex-direction: row;*/
}

.boom-box .wrapper .boombox-right span{
	position: relative;
}

.boom-box .wrapper .boombox-left img{
	position: relative;
}

.boom-box .wrapper .boombox-right{
}

.boom-box .wrapper .boombox-left{
}

@media (max-width:576px){
	.boom-box{
		height: 830px;
	}
	.boombox-right ,  .boombox-left{
		font-size: 0.8rem;
		line-height: 1.5rem;
	}

}

@media (min-width:577px) and (max-width:766px){
	.boom-box{
		height: 700px;
	}
	.boombox-right ,  .boombox-left{
		font-size: 0.9rem;
		line-height: 1.5rem;
	}

}

@media (max-width:767px){
	.boom-box .wrapper .boom-box-content{
		flex-direction: column-reverse;
		gap: 35px;
	}



}

@media (min-width:767px){
	.boom-box .wrapper .boom-box-content{
		flex-direction: row;
	}

	.boom-box .wrapper .boombox-left{
		display: flex;
  	flex-direction: column;
  	align-content: flex-end;
	}

	.boom-box .wrapper .boombox-right{
		width: 55vw;
	}
	
	.boom-box .wrapper .boombox-left{
		width: 35vw;
	}	
	.boombox-right ,  .boombox-left{
		font-size: 1rem;
		line-height: 1.8rem;
	}

	.boombox-right{
		padding: 10px 50px 10px 10px;
	}	

}


/*
.fadeInUp{
	animation:fadeInUp 1s ease backwards;
}
@keyframes fadeInUp{
  0%{transform:translate(0px, 100px); opacity: 0;}
  100%{transform:translate(0px, 0); opacity: 1;}
}
*/
/****************  fade-in  ***********************/
.fade-in {
	animation: fadeIn 1s;
	-webkit-animation: fadeIn 1s;
	-moz-animation: fadeIn 1s;
	-o-animation: fadeIn 1s;
	-ms-animation: fadeIn 1s;
	animation-fill-mode: both;
}

@keyframes fadeIn {
	0% { opacity: 0;}
	30% { opacity: 0;}	
	100% { opacity: 1;}
}

@-moz-keyframes fadeIn {
	0% { opacity: 0;}
	30% { opacity: 0;}		
	100% { opacity: 1;}
}

@-webkit-keyframes fadeIn {
	0% { opacity: 0;}
	30% { opacity: 0;}		
	100% { opacity: 1;}
}

@-o-keyframes fadeIn {
	0% { opacity: 0;}
	30% { opacity: 0;}		
	100% { opacity: 1;}
}

@-ms-keyframes fadeIn {
	0% { opacity: 0;}
	30% { opacity: 0;}		
	100% { opacity: 1;}
}


/****************  fade-in-right  ***********************/
.fade-in-right {
	animation: fadeInRight 2s;
	-webkit-animation: fadeInRight 2s;
	-moz-animation: fadeInRight 2s;
	-o-animation: fadeInRight 2s;
	-ms-animation: fadeInRight 2s;
	animation-fill-mode: both;
}

@keyframes fadeInRight {
	0% { opacity: 0;
			transform: translateX(40px);}
	100% { opacity: 1;
			transform: translateX(0);}
}

@-moz-keyframes fadeInRight {
	0% { opacity: 0;
			transform: translateX(40px);}
	100% { opacity: 1;
			transform: translateX(0);}
}

@-webkit-keyframes fadeInRight {
	0% { opacity: 0;
			transform: translateX(40px);}
	100% { opacity: 1;
			transform: translateX(0);}
}

@-o-keyframes fadeInRight {
	0% { opacity: 0;
			transform: translateX(40px);}
	100% { opacity: 1;
			transform: translateX(0);}
}

@-ms-keyframes fadeInRight {
	0% { opacity: 0;
			transform: translateX(40px);}
	100% { opacity: 1;
			transform: translateX(0);}
}

/****************  fade-in-left  ***********************/
.fade-in-left {
	animation: fadeInLeft 2s;
	-webkit-animation: fadeInLeft 2s;
	-moz-animation: fadeInLeft 2s;
	-o-animation: fadeInLeft 2s;
	-ms-animation: fadeInLeft 2s;
	animation-fill-mode: both;
}

@keyframes fadeInLeft {
	0% { opacity: 0;
			transform: translateX(-40px);}
	100% { opacity: 1;
			transform: translateX(0);}
}

@-moz-keyframes fadeInLeft {
	0% { opacity: 0;
			transform: translateX(-40px);}
	100% { opacity: 1;
			transform: translateX(0);}
}

@-webkit-keyframes fadeInLeft {
	0% { opacity: 0;
			transform: translateX(-40px);}
	100% { opacity: 1;
			transform: translateX(0);}
}

@-o-keyframes fadeInLeft {
	0% { opacity: 0;
			transform: translateX(-40px);}
	100% { opacity: 1;
			transform: translateX(0);}
}

@-ms-keyframes fadeInLeft {
	0% { opacity: 0;
			transform: translateX(-40px);}
	100% { opacity: 1;
			transform: translateX(0);}
}

/****************  fade-in-up  ***********************/
.fade-in-up {
    animation: fadeInUp 2s;
    -webkit-animation: fadeInUp 2s;
    -moz-animation: fadeInUp 2s;
    -o-animation: fadeInUp 2s;
    -ms-animation: fadeInUp 2s;
    animation-fill-mode: both;
}

@keyframes fadeInUp {
    0% { opacity: 0;
        transform: translateY(40px);}
    100% { opacity: 1;
        transform: translateY(0);}
}

@-moz-keyframes fadeInUp {
    0% { opacity: 0;
        transform: translateY(40px);}
    100% { opacity: 1;
        transform: translateY(0);}
}

@-webkit-keyframes fadeInUp {
    0% { opacity: 0;
        transform: translateY(40px);}
    100% { opacity: 1;
        transform: translateY(0);}
}

@-o-keyframes fadeInUp {
    0% { opacity: 0;
        transform: translateY(40px);}
    100% { opacity: 1;
        transform: translateY(0);}
}

@-ms-keyframes fadeInUp {
    0% { opacity: 0;
        transform: translateY(40px);}
    100% { opacity: 1;
        transform: translateY(0);}
}

/****************  fade-in-down  ***********************/
.fade-in-down {
    animation: fadeInDown 2s;
    -webkit-animation: fadeInDown 2s;
    -moz-animation: fadeInDown 2s;
    -o-animation: fadeInDown 2s;
    -ms-animation: fadeInDown 2s;
    animation-fill-mode: both;
}

@keyframes fadeInDown {
    0% { opacity: 0;
        transform: translateY(-20px);}
    100% { opacity: 1;
        transform: translateY(0);}
}

@-moz-keyframes fadeInDown {
    0% { opacity: 0;
        transform: translateY(-20px);}
    100% { opacity: 1;
        transform: translateY(0);}
}

@-webkit-keyframes fadeInDown {
    0% { opacity: 0;
        transform: translateY(-20px);}
    100% { opacity: 1;
        transform: translateY(0);}
}

@-o-keyframes fadeInDown {
    0% { opacity: 0;
        transform: translateY(-20px);}
    100% { opacity: 1;
        transform: translateY(0);}
}

@-ms-keyframes fadeInDown {
    0% { opacity: 0;
        transform: translateY(-20px);}
    100% { opacity: 1;
        transform: translateY(0);}
}
/******************************** Counter Section *******************************/

#counter{
	width: 100%;
  /* height: 30%; */
  position: absolute;
  /* bottom: 5%; */
  left: 0;
}

#co-counter{
	width : 100%;
	position: relative;
	margin: 0px !important;
	/* z-index: 1; */
}

.counter-container{
	position: initial;
  /* width: 80%; */
  border: 2px solid #ccc;
  border-radius: 10px;
  margin: 0px auto;
  /* padding: 10px 10px 10px 10px; */
  background: rgba(225, 225, 225, .8);
  /* height: 100%; */
}

.counter-dashed-line{
	position: absolute;
	opacity: 1;
  width: 100%;
  top: 8vh;
  border-top: 2px dashed var(--counter-border-color);
  /* z-index: -1; */
}

.counter-dashed-line > div{
	position: relative;
}

.counter:hover{	
	box-shadow: var(--counter-shadow-color) 0px 5px 15px; /*--box-up-shadow-color*/
}

.counter {
	width:100px ;
	height:100px ;
	font-family: 'iransansfanum' !important;

  display: flex;
  justify-content: center;
  align-items: center;
	text-align: center;
	margin: auto;
	font-weight: bold;
	padding: 5px;
	background-color: var(--counter-bg-color);
  border: 5px solid var(--counter-border-color);
	color: var(--counter-text-color) !important;
	
	border-radius: 50%;

	vertical-align: middle;
	position: relative;
}

.counter-title
{
	display: block;
	text-align: center;
	color: var(--counter-text-color);
	font-weight: bold;
  	font-size: 1rem;
  	margin-top: 0.5rem;
}


@media (max-width:575px){
	.counter-dashed-line{
		display: none;
	}

	#counter{
		bottom: 0%;	
		height: 50vh;
		padding: 5px 0px 5px 0px;
	}

	.counter {
	width:70px !important;
	height:70px !important;
	font-size:1.1rem;  
	margin-top: 2px;
	}

	.counter-title{
		padding-bottom: 15px;
	}

	.counter-container{
		 width: 95%; 
		 height: 100%;
	}	

	.counter-container .row{	
		padding: 2px 2px !important;
		height: 100%;
	}

	.counter-title
	{
		font-size: 0.8rem;
	}
	
}

@media (min-width:576px) and (max-width:767px){
	.counter-dashed-line{
		display: none;
	}

	#counter{
		bottom: 0%;	
		height: 50vh;
		padding: 5px 0px 5px 0px;
		position: relative;
	}

	.counter {
	width:100px !important;
	height:100px !important;
	font-size:1.1rem;  
	}

	.counter-title{
		padding-bottom: 15px;
	}
	.counter-container{
		width: 99%; 
		height: 100%;
 }	
 .counter-title
 {
	 font-size: 0.8rem;
 }

 .counter-container .row{
	height:100%;
 }
}


@media (min-width:768px) and (max-width:991px){
	.counter-dashed-line{
		display: none;
	}

	#counter{
		bottom: 0%;	
		/* height: 50vh; */
		padding: 5px 0px 5px 0px;
		position: relative;
	}

	.counter {
	width:80px !important;
	height:80px !important;
	font-size:1.1rem;  
	}

	.counter-title{
		padding-bottom: 15px;
	}
	.counter-container{
		width: 99%; 
		/* height: 100%; */
 }	
 .counter-title
 {
	 font-size: 0.8rem;
 }

 .counter-container .row{
	/* height:100%; */
 }

	/*
	#counter{
		bottom: 5%;	
	}

	.counter {
	font-size:1.7rem;  
	}

	.counter-title{
		padding-bottom: 15px;
	}

	.counter-container{
		width: 80%; 
		height: 100%;		
 }	
 .counter-title
 {
	 font-size: 0.8rem;
 }
*/
}

@media (min-width:992px){
	#counter{
		bottom: 5%;	
	}

	.counter {
	font-size:1.7rem;  
	}

	.counter-title{
		padding-bottom: 15px;
		font-size: 0.9rem;		
	}
	.counter-container{
		width: 80%; 
 }	

 .counter-title
 {
	 font-size: 1rem;
 }

}


/***********************************/
.block{
	display: block;
}

.title01{
	color: var(--main-color);
	font-size: 2rem;
	font-weight: bold;
	line-height: 2.5rem;;
}

.title06{
	color: #777;
	font-size: 1rem;
	font-weight: normal;
}

/******************************* Groups Section **********************************/
/*
@media (max-width:512px){
	.group{
		padding: 5px;
	}
	.group .img{
		height: 100px;
		width: 100px;
	}	
	.group span{
		font-size: 0.8rem;
	}	

	.group span{
		max-width: 100px;
	}
}

@media (max-width:768px) and (min-width: 511px){
	.group{
		padding: 20px 20px 20px 20px;
	}
	.group .img{
		height: 110px;
		width: 110px;
	}	
	.group span{
		font-size: 0.9rem;
	}	
}

@media (min-width:768px){
	.group{
		padding: 20px 20px 20px 20px;
	}
	.group .img{
		height: 160px;
		width: 160px;
	}	
	.group span{
		font-size: 1rem;
	}	
}

#groups{
	padding:30px 10px 10px 10px;
	background-color: #f7f8fb;
	position: relative;
}

.groups{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}


.group{
	margin-bottom: 30px;
	border-radius: 10px;
	margin:30px 10px 30px 10px;
}

.group span{
	font-weight: bold;
	color: var(--main-menu-color);
	display: block;  
  	text-align: center;
}

.group .img{
	background-color: var(--main-menu-color);	
	margin:auto;
	
}
*/
/*
.group.mech > .img{
		-webkit-mask: url(../img/groups/machanical_eng.svg) no-repeat center;
		mask: url(../img/groups/machanical_eng.svg) no-repeat center;
		mask-size: cover;			
}

.group.ee > .img{
	-webkit-mask: url(../img/groups/electrical_eng.svg) no-repeat center;
	mask: url(../img/groups/electrical_eng.svg) no-repeat center;
	mask-size: cover;	
}

.group.civil > .img{
	-webkit-mask: url(../img/groups/civil_eng.svg) no-repeat center;
	mask: url(../img/groups/civil_eng.svg) no-repeat center;
	mask-size: cover;	
}

.group.ce > .img{
	-webkit-mask: url(../img/groups/computer_eng.svg) no-repeat center;
	mask: url(../img/groups/computer_eng.svg) no-repeat center;
	mask-size: cover;	
}

.group.che > .img{
	-webkit-mask: url(../img/groups/chemical_eng.svg) no-repeat center;
	mask: url(../img/groups/chemical_eng.svg) no-repeat center;
	mask-size: cover;	
}

.group.mat > .img{
	-webkit-mask: url(../img/groups/material_eng.svg) no-repeat center;
	mask: url(../img/groups/material_eng.svg) no-repeat center;
	mask-size: cover;	
}

.group.inde > .img{
	-webkit-mask: url(../img/groups/industrial_eng.svg) no-repeat center;
	mask: url(../img/groups/industrial_eng.svg) no-repeat center;
	mask-size: cover;	
}

.group.mech:hover, .group.ee:hover, .group.ce:hover, .group.che:hover, .group.mat:hover, .group.civil:hover, .group.inde:hover{
	cursor: pointer;
}
*/

/****************  box-in-up and box-in-down   ***********************/
.group:not(:hover) {
	animation: boxInDown 1s;
	-webkit-animation: boxInDown 1s;
	-moz-animation: boxInDown 1s;
	-o-animation: boxInDown 1s;
	-ms-animation: boxInDown 1s;
	animation-fill-mode: both;
}

@keyframes boxInDown {
	0% { opacity: 1;
			transform: translateY(-30px);
			box-shadow: var(--box-up-shadow-color) 0px 5px 15px;
		}		
	100% { opacity: 1;
			transform: translateY(0px);
		}			
}

@-moz-keyframes boxInDown {
	0% { opacity: 1;
		transform: translateY(-30px);
		box-shadow: var(--box-up-shadow-color) 0px 5px 15px;
	}		
100% { opacity: 1;
		transform: translateY(0px);
	}			
}

@-webkit-keyframes boxInDown {
	0% { opacity: 1;
		transform: translateY(-30px);
		box-shadow: var(--box-up-shadow-color) 0px 5px 15px;
	}		
100% { opacity: 1;
		transform: translateY(0px);
	}			
}

@-o-keyframes boxInDown {
	0% { opacity: 1;
		transform: translateY(-30px);
		box-shadow: var(--box-up-shadow-color) 0px 5px 15px;
	}		
100% { opacity: 1;
		transform: translateY(0px);
	}			
}

@-ms-keyframes boxInDown {
	0% { opacity: 1;
		transform: translateY(-30px);
		box-shadow: var(--box-up-shadow-color) 0px 5px 15px;
	}		
100% { opacity: 1;
		transform: translateY(0px);
	}			
}

/****************  box-in-up  ***********************/
.group:hover {
	animation: boxInUp 1s;
	-webkit-animation: boxInUp 1s;
	-moz-animation: boxInUp 1s;
	-o-animation: boxInUp 1s;
	-ms-animation: boxInUp 1s;
	animation-fill-mode: both;
}

@keyframes boxInUp {
	0% { opacity: 1;
			transform: translateY(0px);			
		}
	100% { opacity: 1;
			transform: translateY(-30px);
			box-shadow: var(--box-up-shadow-color) 0px 5px 15px;
			background-color: #fff;			
		}
}
@-moz-keyframes boxInUp {
	0% { opacity: 1;
		transform: translateY(0px);
	}
100% { opacity: 1;
		transform: translateY(-30px);
		box-shadow: var(--box-up-shadow-color) 0px 5px 15px;
		background-color: #fff;					
	}
}

@-webkit-keyframes boxInUp {
	0% { opacity: 1;
		transform: translateY(0px);
	}
100% { opacity: 1;
		transform: translateY(-30px);
		box-shadow: var(--box-up-shadow-color) 0px 5px 15px;
		background-color: #fff;					
	}
}

@-o-keyframes boxInUp {
	0% { opacity: 1;
		transform: translateY(0px);
	}
100% { opacity: 1;
		transform: translateY(-30px);
		box-shadow: var(--box-up-shadow-color) 0px 5px 15px;
		background-color: #fff;					
	}
}

@-ms-keyframes boxInUp {
	0% { opacity: 1;
		transform: translateY(0px);
	}
100% { opacity: 1;
		transform: translateY(-30px);
		box-shadow: var(--box-up-shadow-color) 0px 5px 15px;
		background-color: #fff;
	}
}

/****************  Wheels ****************************/
/*@media (min-width:600px) and (max-width:992px) {
	.wheel{	
	}
}
*/
.wheel{
	/*
	background-color: var(--footer-border-color);	
	-webkit-mask: url(../img/wheel.png) round center;
	mask: url(../img/wheel.png) round center;
	*/
	background-image: url(../img/wheel.png);
	background-image: url(../img/wheel.png);
  	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	
  	position: absolute;
    height: 80%;/*500px;*/
	width: 80%; /*500px;*/

}


#wheel1{	
	top: 20px;
  left: -35%;
}

#wheel2{
	bottom: -40%;
  right: -35%;	
}


/********************** image-box01 ****************************/
.image-box01{
	position:relative;
	margin: 5px 2px;	
	/* aspect-ratio: 4/2; */
}

.image-box01 img{
	border:1px solid #ccc;	
	border-radius: 10px;
	width : 100%;
	object-fit: cover;	
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.image-box01 .image-title {
	position: absolute;
	bottom: 0px;
	background-image: linear-gradient(to top, var(--main-menu-color), rgba(255,0,0,0));
	width: 100%;
	height: 25%;
	border-radius: 10px;
}

.image-box01 .image-title > span{
	/* bottom: 10px; */
  position: absolute;
  color: #fff;
  /* font-weight: bold; */
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;	
}


@media (min-width:992px){
	.image-box01.large img{
		height: 34vh;	
	}
	.image-box01.small img{
		height: 22vh;	
	}		

	.image-box01.large .image-title > span{
		font-size: 0.9rem;
	}
	
	.image-box01.small .image-title > span{
		font-size: 0.7rem;
	}		
}

@media (min-width:768px) and (max-width:991px){
	.image-box01.large img{
		height: 34vh;	
	}
	.image-box01.small img{
		height: 22vh;	
	}		
	.image-box01.large .image-title > span{
		font-size: 0.9rem;
	}
	
	.image-box01.small .image-title > span{
		font-size: 0.7rem;
	}	
}

@media (min-width:576px) and (max-width:767px){
	.image-box01.large img{
		height: 34vh;	
	}
	.image-box01.small img{
		aspect-ratio: 16/9;
		/* height: 22vh;	 */
	}		
	div:has(.image-box01.small){
		padding-left: 1px;		
		padding-right: 1px;
	}
	.no-padding{
		padding-right: 30px !important;
		padding-left: 30px !important;

		/* height: 22vh;	 */
	}		
	.image-box01.large .image-title > span{
		font-size: 0.9rem;
	}
	
	.image-box01.small .image-title > span{
		font-size: 0.7rem;
	}
	
}

@media (max-width:576px){
	.image-box01 img{
		aspect-ratio: 16/9;
		/* height: 34vh;	 */
	}	
	.image-box01.large .image-title > span{
		font-size: 0.9rem;
	}
	
	.image-box01.small .image-title > span{
		font-size: 0.9rem;
	}
	
}

/********************* PhocaGallery ***********************/
.pg-cv-name {
  text-align: center !important;
}

/********************** news-box01 ****************************/
.news-box01{
	position:relative;
	margin: 5px 2px;	
	border:1px solid #ccc;	
	border-radius: 10px;
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;	
	padding: 5px;
	overflow: auto;
	/* aspect-ratio: 4/2; */
}

.news-box01.large{
	display: flex;
	flex-direction: column;	
	/* height: 68vh;	 */
}


.news-box01.small .news-photo {
	float: right;
	width:40%;
	height: 100%;
}
.news-box01.small .news-photo img{
	display: block;
  height: 100%;
}

.news-box01.small .news-body {
	float: left;
	width:60%;
}


.news-box01 .news-photo img{
	border:1px solid #ccc;	
	border-radius: 10px;
	width : 100%;
	object-fit: cover;	

	
}

.news-box01.large .news-photo img{
	height: 30vh;	
}

.news-box01.large .news-title{
	padding: 10px;
}

.news-box01.small .news-body{
	padding: 5px 10px;	
}

.news-box01.small .news-body{
	display: flex;
	flex-direction: column;	
	height: 100%;
}


.news-box01.small .news-body .news-title{
	text-align: right;

}


.news-box01 .news-title span{
	font-weight: bold;
	color: var(--main-color);
}

.news-box01.large .news-content{
	display: flex;
	flex-grow: 1;
	padding: 10px 20px;
}

.news-box01.small .news-body .news-content{
	display: flex;
	flex-grow: 1;
	padding: 5px 0px;;
}

.news-box01 .news-content span{
	text-align: justify;
	color: var(--main-color);
}
.news-box01.large .news-footer{
	padding-bottom: 10px;
}
.news-box01.small .news-footer{
	padding-bottom: 5px;
}

.news-box01 .news-footer .date.right{
	float: right;	
	color: var(--main-color);
}

.news-box01 .news-footer .more.left{
	float: left;	
}


.news-box01.large .news-footer .date.right{
	padding-right: 20px;
}

.news-box01.large .news-footer .more.left{
	padding-left: 20px;;
}

.news-box01.large .news-footer .date.right{
	padding-right: 10px;
	color: var(--main-color);
}

.news-box01.large .news-footer .more.left{
	padding-left: 10px;
}

@media (min-width:768px){
	.news-box01.large{
	 height: 68vh;
	}
	.news-box01.small{
		height: 22vh;	
	}
	
	
}

@media (max-width:767px){
	.news-box01.large{
		/* height: 68vh; */
	 }
 
}

/*
@media (min-width:992px){

	.news-box01.large{
		height: 68vh;	
	}
	.news-box01.news-photo{
		height: 30vh;
	}
	


	.news-box01.small img{
		height: 22vh;	
	}		

	.news-box01.large .image-title > span{
		font-size: 1rem;
	}
	
	.news-box01.small .image-title > span{
		font-size: 0.8rem;
	}		
}

@media (min-width:768px) and (max-width:991px){
	.news-box01.large img{
		height: 68vh;	
	}
	.news-box01.small img{
		height: 22vh;	
	}		
	.news-box01.large .image-title > span{
		font-size: 0.9rem;
	}
	
	.news-box01.small .image-title > span{
		font-size: 0.7rem;
	}	
}

@media (min-width:576px) and (max-width:767px){
	.news-box01.large img{
		height: 68vh;	
	}
	.news-box01.small img{
		aspect-ratio: 16/9;

	}		
	div:has(.news-box01.small){
		padding-left: 1px;		
		padding-right: 1px;
	}
	.no-padding{
		padding-right: 30px !important;
		padding-left: 30px !important;

	}		
	.news-box01.large .image-title > span{
		font-size: 0.9rem;
	}
	
	.news-box01.small .image-title > span{
		font-size: 0.7rem;
	}
	
}

@media (max-width:576px){
	.news-box01 img{
		aspect-ratio: 16/9;
	}	
	.news-box01.large .image-title > span{
		font-size: 0.9rem;
	}
	
	.news-box01.small .image-title > span{
		font-size: 0.9rem;
	}
	
}
*/

/************* news-package ***************************/

#news-package ul{
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#news-package ul{
	/* margin-bottom: 5px; */
	border-bottom: 0px;
}

#news-package ul li{
	padding: 0px 5px;
}


#news-package ul li:hover, li.active{
	/* border-bottom: 2px solid var(--main-color) !important; */
	background-color: transparent;
}

#news-package ul li:hover a , 
#news-package ul li.active a{
	border-bottom: 2px solid var(--main-color) !important;
}

#news-package ul li a:hover, a:active{
	background-color: transparent;
}

#news-package ul li.active > a:focus{
	box-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
	-webkit-box-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
	
}

@media (max-width:576px){
	#news-package ul li a{	
		padding: 0.5rem 0.1rem;	
	}
}

@media (min-width:575px){
	#news-package ul li a{
		padding: 0.5rem 1rem;	
	}
}

#news-package ul li a{
	margin: 0px 0.5rem;
	border: 0px !important;
}

#news-package ul li span{
	font-size: 1rem;
}

#news-package .tab-content{
	border: 0px solid #fff;
}

/***********************text-news-archive*************************/
.news-archive{
	float: left;
	margin: 0px 10px;
}

.news-archive > a {
	display: block;
	width: 200px;

	font-size: 1rem;
	font-weight: bold;   
	margin-top: 10px;

    background-color:  var(--w-color);
    color: var(--main-color) !important;
    border: 2px var(--main-color) solid;    
    border-radius: 10px;

    text-align: center;
    padding: 5px;
    
    
    
}

.news-archive > a:hover {
    background-color: var(--main-color);
    color: var(--w-color) !important;
    border: 2px var(--main-color) solid;    
}

#tab-2 {
	overflow-x: hidden;
}

#tab {
	overflow-x: hidden;
}

/***********************photo-news-archive*************************/

.photos-archive{
	float: left;
	margin: 0px 10px;
}

.photos-archive > a {
	display: block;
	width: 200px;

	font-size: 1rem;
	font-weight: bold;   
	margin-top: 10px;

    background-color:  var(--w-color);
    color: var(--main-color) !important;
    border: 2px var(--main-color) solid;    
    border-radius: 10px;

    text-align: center;
    padding: 5px;
    
    
    
}

.photos-archive > a:hover {
    background-color: var(--main-color);
    color: var(--w-color) !important;
    border: 2px var(--main-color) solid;    
}



/*********************** evofrontpage Module *******************************/
.evofrontpage-default{
	padding-top: 0px !important;
}

.evofrontpage-default .title {
  color: var(--main-color);
}

.evofrontpage-default .evofp-date-author {
	color: var(--main-color) !important;
}

.archive-div{
	position: absolute;
  bottom: 0px;
  float: left;
  width: 100%;
  padding-left: 85px;
	
}

.archive-div:before{
	display: block;
	border:1px solid var(--main-color);

}

.archive-div .archive a{
	padding: 8px 32px;
	background-color: var(--main-color);
	border: 1px solid var(--white-color);
	color: var(--white-color);
	font-size: 1rem;
	border-radius: 5px;
}
.archive-div .archive a:hover{
	cursor: pointer;
	font-weight: bold;
	background-color: var(--white-color);
	border: 1px solid var(--main-color);
	color: var(--main-color);

}

.evofp-table-cell-inner .head a div {
	text-align: justify;
}

.evofp-table-row{
	padding-top: 5px;
}

.evofp-table-row .evofp-table-cell{
	margin: 2px 0px;
}

.evofp-table-cell-inner {
  background-color: #fff;
  border-radius: 5px;
  padding: 0px;
  margin: 0px 0px 25px 0px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 0px 0px 0px, rgba(14, 30, 37, 0.32) 0px 0px 0px 0px;
  transition: 0.5s;
}

.evofp-table-cell-inner:hover {
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px !important;
}


/******************* Tabs ***************************/
.rl_tabs > ul.nav-tabs > li > a {
  color: var(--main-color) !important;
}


/********************************************************/
/*                        Pin Icons                     */
/********************************************************/

@media (max-width:575px){
	.icons {
		display: none;
	}
}

.icons {
    position: fixed;
    top: 30%;
    left: 0;
    font-size: 2rem;
    z-index: 200;
    margin: 1rem auto 1rem 0;
    text-align: center;
}

.icons a {
    color: white;
    display: block;

}

.icons img {
    vertical-align: middle;
}

.icons span{
    font-size: 0.9rem;;
}

.page-list li{
    list-style: disc !important;
    color: var(--color-pin);/*#A3CFE5;*/
    background-color: #eee;
}

.page-list li.active{
    color: var(--color-pin-active);/*var(--second-color);*/
    text-shadow: rgba(200, 200, 200, 0.44) 0px 0px 8px;
}

.pin{
	position:relative;
	width: 160px;
	height: 40px;
	left: -120px;
	border:1px solid #ccc;
	border-left: 0px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	margin: 2px 0px 5px 0px; 
	background-color: rgba(240,240,240,0.1);
	/*padding:5px;*/
	display: flex;
	color: var(--color-pin);/* #A3CFE5;*/
	transition: left 1s;
}

.pin.active img{
	color: var(--color-pin-active);/*var(--second-color);*/
	fill: var(--color-pin-active);
}


.pin.over img{
	color: var(--color-pin-active);/*var(--second-color);*/
	fill: var(--color-pin-active);	
}

.pin.over span{
	color: var(--color-pin-active);/*var(--second-color);*/
}


.pin img, .pin i{
	width: 40px;
	font-size: 1.5rem;
	padding:5px;
	border-left:1px solid #ccc;
}

.pin span{
	padding-right: 5px;
	align-content: center;
}

.pin-icon{
	mask: url(../img/groups/computer_eng.svg) no-repeat center;
    mask-size: auto;
  	mask-size: cover;
	background-image: url(../img/groups/computer_eng.svg) no-repeat center;
}


/****************************** flip Box Down to Up (planning perpose) **************************************/

.flipbox-down-to-up.back.boss {
	background-size: cover;
	height: 350px;
	width: 300px;	
} 

.flipbox-down-to-up .front.boss {
	height: 95px;
	top:300px;
}
.flipbox-down-to-up .front.boss span.head{
	margin-top: 15px;
	margin-bottom: 75px;
	font-size: 1.7em !important;
	padding: 10px 10px;	
  }

.flipbox-down-to-up .front.boss span{
	font-size: 1rem;
}
	


.flipbox-down-to-up.back {
	background-size: cover;
	height: 250px;
	width: 220px;	

  }

  .flipbox-down-to-up .front {
	background-color: #09426e;
	width: 100%;
	height: 35px;
	top:215px;
	opacity: 0.7;
	position: relative;
	z-index: inherit;
	transition: height 2s, top 2s, opacity 2s;
  }

  .flipbox-down-to-up .front:hover{
	background-color: #09426e;
	width: 100%;
	height: 100%;
	top:0px;
	opacity: 1;
	position: relative;
	z-index: inherit;
  }


  
  .flipbox-down-to-up .front span{
	color:#ffffff;
	display: block;
	padding: 2px 10px;
	text-align: center;	
  }

  .flipbox-down-to-up .front span.head{
	text-align: center;
	margin-top: 15px;
	margin-bottom: 25px;
	font-size: 1.3em !important;
	font-weight: bold;
	border-bottom: 2px var(--second-color) solid; /*#E5654C*/
  }

  .flipbox-down-to-up .front span.bold{
		font-weight: bold;
	}

	.flipbox-down-to-up .front a{
		color: #fff;
	}

	.flipbox-down-to-up .front a:hover{
		font-weight: bold;		
	}
	
/***************** Flex Box of Down to Up Flip Boxex **************************/	
.person-items{
		display: flex;
  	flex-direction: row;
  	flex-wrap: wrap;
  	justify-content: center;
	}

.person-item{	
	overflow: hidden;
	margin: 5px;
	border-radius: 5px;
}

.person-item .back{	
	border-radius: 5px;
}

.person-item .front{	
	border-radius: 5px;
}


/****************************** flip Box Down Up (planning perpose) **************************************/
.flipbox-down-up{
	position: relative;
	/* width: 100%;	 */
	height: 300px;
	margin : 10px;
	border-radius: 10px;
}


.flipbox-down-up .back {
	/* background-size: cover; */
	/* background: url(../img/background/telp_white.png) repeat 0 50%; */
	/* background : linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("../img/background/telp_white.png");	 */
	background-color: var(--main-color);
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 10px;
}

.flipbox-down-up .back img{
	display: block;
  margin: 0px auto;
}

.flipbox-down-up .front {	
	overflow: hidden;
	background-color: #09426e;
	width: 100%;
	height: 45px;
	top:255px;
	opacity: 0.7;
	position: absolute;
	z-index: inherit;
	border-radius: 10px;
	transition: height 2s, top 2s, opacity 2s;			
}
/*
.flipbox02-down-to-up .front:hover{
	background-color: #09426e;
	width: 100%;
	height: 100%;
	top:0px;
	opacity: 1;
	position: relative;
	z-index: inherit;
  }
*/


.flipbox-down-up .front:hover, .flipbox-down-up .front.hovered {
		background-color: #09426e;
		width: 100%;
		height: 100%;
		top:0px;
		opacity: 1;
		position: absolute;
		z-index: inherit;

		}
	
		
.flipbox-down-up .front span{
	color:#ffffff;
	display: block;
	padding: 2px 10px;
	text-align: center;	
  }

.flipbox-down-up .front span.head{
	text-align: center;
	padding-top: 10px;
	/* margin-top: 15px; */
	margin-bottom: 15px;
	font-size: 1.3em !important;
	font-weight: bold;
	/* border-bottom: 2px var(--second-color) solid; */
  }


.flipbox-down-up .front span.bold{
		font-weight: bold;
	}

.flipbox-down-up .front a{
		color: #fff;
	}

.flipbox-down-up .front a:hover{
		font-weight: bold;		
	}
	
.flipbox-down-up .back.telp {
	/* background-size: cover; */
	/* background: url(../img/background/telp_white.png) repeat 0 50%; */
	background : linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)), url("../img/background/telp_white.png");	
	background-color: var(--main-color);
}

.flipbox-down-up .back.shamel {
	/* background-size: cover; */
	/* background: url(../img/background/telp_white.png) repeat 0 50%; */
	background : linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)), url("../img/background/shamel_white.png");	
	background-color: var(--main-color);
}


.flipbox-down-up .front .close{
	display: none;
	position: absolute;
	top: 10px;
	left: 10px;
}

.flipbox-down-up .front .close i{
	color: #fff;
	font-size: 24px;
}

/******************* certificate-section *********************************/
#certificate-section{
	position: relative;
	background: url("../img/building/building03.jpg");
  background-repeat: no-repeat;
  background-size: cover;
	background-position: center;
	/* height: 70vh; */
	margin-bottom: 20px;
	
	/* background-color: var(--main-color); */
}

/* #certificate-section .container{
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0%);

  bottom: 0px;
	display: flex;
	flex-direction: row;	
	justify-content: center;
	align-items: flex-end;
} */

/* 
#get-certificate, #post-certificate{
	display: flex;
	flex-direction: row;	
	padding: 30px 10px;
} */

#get-certificate, #post-certificate{
	position: relative;
	/* width: 40%; */
	height: 300px;
	padding: 20px;
}
#post-certificate{
	background-color: var(--second-color);
	background : linear-gradient(rgba(255,193,7,.85), rgba(255,193,7,.85));	
	/* border-top-left-radius: 30px;	 */
}

#get-certificate{
	background-color: var(--main-color);
	background : linear-gradient(rgba(16,56,107,.85), rgba(16,56,107,.85));	
	/* border-top-right-radius: 30px; */
}

#get-certificate .img, #post-certificate .img{
	display: block;
	float: right;
	width : 20%;
}

#get-certificate .img img, #post-certificate .img img{
	display: block;
  margin: 5px auto;
	width : 90%;
}


#get-certificate .head, #post-certificate .head{
	/* height: auto; */
	display: block;
}

#get-certificate .header, #post-certificate .header{
	/* display: flex;	
	flex-direction: column;
	float: left; */
	display:block;
	width : 70%;	
  margin: 5px auto;
	/* align-items: right !important; */
}


#get-certificate .header span, #post-certificate .header span{
	display: block;
  margin: 5px auto;
	color: var(--white-color);
	font-size: 0.9rem;
	font-weight: bold;
	padding-right: 40px;
	/* line-height: 1rem; */
}

#get-certificate .content, #post-certificate .content{
	display: block;	
	width: 100%;
	padding: 10px;
}

#get-certificate .content span, #post-certificate .content span{
	font-size: 0.8rem;
	font-weight: normal;

	color: white;
}

#post-certificate .btn , #get-certificate .btn {
	position: absolute;
	display: block;
	bottom: 10px;
	width: 50%;
	left: 50%;
	transform: translate(-50%, 0%);

}

#post-certificate .btn a , #get-certificate .btn a{
	display: block;
	width : 100%;
	padding: 7px 10px;
	border: 1px solid white;
	border-radius: 5px;
	font-weight: bold;
	font-size: 0.8rem ;
}

#post-certificate .btn a, #get-certificate .btn a{
	color: white;
}


#post-certificate .btn a:hover, #get-certificate .btn a:hover{
	background-color: white;
}

#post-certificate .btn a:hover{
	color: var(--second-color);
}

#get-certificate .btn a:hover{
	color: var(--main-color);
}

@media (max-width:575px){
	#certificate-section{
		height: 100vh;
	}
	
	#get-certificate, #post-certificate{
		width: 100%;
	}	

	#get-certificate{	
		border-top-right-radius: 30px;		
		border-top-left-radius: 30px;			
	}

	#post-certificate{	
		border-bottom-left-radius: 30px;		
		border-bottom-right-radius: 30px;				
	}	

	#certificate-section .container {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		/* bottom: 0px; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}
}


@media (min-width:576px) and (max-width:767px){
	#certificate-section{
		height: 70vh;
	}

	#get-certificate, #post-certificate{
		width: 100%;
	}	

	#get-certificate{	
		border-top-right-radius: 30px;		
	}

	#post-certificate{	
		border-top-left-radius: 30px;			
	}	


	#certificate-section .container{
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
	
		bottom: 0px;
		display: flex;
		flex-direction: row;	
		justify-content: center;
		align-items: flex-end;
	}
	
}


@media (min-width:768px) and (max-width:991px){
	#get-certificate, #post-certificate{
		width: 100%;	
		border-top-right-radius: 30px;		
	}

	#get-certificate{	
		border-top-right-radius: 30px;		
	}

	#post-certificate{	
		border-top-left-radius: 30px;			
	}	

	#certificate-section .container{
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
	
		bottom: 0px;
		display: flex;
		flex-direction: row;	
		justify-content: center;
		align-items: flex-end;
	}
	
	#certificate-section{
		height: 50vh;
	}
	
}

@media (min-width:992px){
	#certificate-section{
		height: 70vh;
	}

	#get-certificate, #post-certificate{
		width: 40%;
	}

	#get-certificate{	
		border-top-right-radius: 30px;		
	}

	#post-certificate{	
		border-top-left-radius: 30px;			
	}	

	#certificate-section .container{
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
	
		bottom: 0px;
		display: flex;
		flex-direction: row;	
		justify-content: center;
		align-items: flex-end;
	}
		
}


/******************* help-section *********************************/
#help-section{
	position: relative;
	margin-bottom: 20px;
}


#fum-help, #none-fum-help{
	position: relative;
	padding: 20px;
  text-align: center;
	background-image: radial-gradient(at center center, #15346B 0%, #0A1624 100%);
}

#fum-help .content, #none-fum-help .content{
	display: block;	
	width: 100%;
	padding: 10px;
}

#fum-help .content span, #none-fum-help .content span{
	font-size: 0.8rem;
	font-weight: bold;
	color: white;
}

#fum-help .content span a, #none-fum-help .content span a{
	color: white;
}

#fum-help .content span a:hover, #none-fum-help .content span a:hover{
	color: rgba(255,193,7,.85);
}


#none-fum-help .btn , #fum-help .btn {
	position: absolute;
	display: block;
	bottom: 10px;
	width: 50%;
	left: 50%;
	transform: translate(-50%, 0%);
}

#none-fum-help .btn a , #fum-help .btn a{
	display: block;
	width : 100%;
	padding: 7px 10px;
	border: 1px solid white;
	border-radius: 5px;
	font-weight: bold;
	font-size: 0.8rem ;
}

#none-fum-help .btn a, #fum-help .btn a{
	color: white;
}


#none-fum-help .btn a:hover, #fum-help .btn a:hover{
	background-color: white;
}

#none-fum-help .btn a:hover{
	color: var(--second-color);
}

#fum-help .btn a:hover{
	color: var(--main-color);
}

@media (max-width:575px){
	#help-section{
		height: 50vh;
	}
	
	#fum-help, #none-fum-help{
		width: 100%;
		border-radius: 30px;		
	}	

	#help-section .container {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		/* bottom: 0px; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
	}
}


@media (min-width:576px) and (max-width:767px){
	#help-section{
		height: 20vh;
	}

	#fum-help, #none-fum-help{
		width: 100%;
		border-radius: 30px;		
	}	

	#help-section .container{
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
	
		bottom: 0px;
		display: flex;
		flex-direction: row;	
		justify-content: center;
		align-items: stretch;
	}
	
}


@media (min-width:768px) and (max-width:991px){
	#fum-help, #none-fum-help{
		width: 100%;	
		border-radius: 30px;		
	}

	#help-section .container{
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
	
		bottom: 0px;
		display: flex;
		flex-direction: row;	
		justify-content: center;
		align-items: stretch;
	}
	
	#help-section{
		height: 20vh;
	}
}

@media (min-width:992px){
	#help-section{
		height: 40vh;
	}

	#fum-help, #none-fum-help{
		width: 40%;
		border-radius: 30px;		
	}

	#help-section .container{
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
	
		bottom: 20%;
		display: flex;
		flex-direction: row;	
		justify-content: center;
		align-items: stretch;
	}
		
}


/*************************** Event Module *******************************/

.event{
	overflow: hidden;
}

.event-body{
	display: flex;
	flex-direction: row;
	align-items: stretch;
	height: 85%;
}

.event-body .event-date{
	min-width: 50px;
	max-width: 100px;
	width: 30%;
	height: 100%;
	writing-mode: sideways-lr;
}

.event-body .event-date span{

}

.event-body .event-date a{
	width:100%; 
	height:100%;
	font-size: 1.2rem;
  font-weight: bold;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.event-body .event-poster img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-top-left-radius: 0.25rem;
	border-bottom-left-radius: 0.25rem;
}

.event-footer{
	height: 100%;	
}

.event-footer a{
	display: block;
	height: 100%;
	padding: 5px 0px;
}
.event-footer span{
	display: block;
  text-align: center;
	border: 1px solid #ccc;
	border-radius: 0.25rem;
	height: 100%;
	padding: 10px 5px 5px 5px;
}

#wave{
	width: 100%;	
	position: absolute;
	bottom:0px;
}

/*****************************  Circular Scrolling Progress Bar *********************************************/

#scrolling {
	position: fixed;
	bottom: 00px;
	right: 0px;
	z-index: 2000;
}

.goto-up{
	position: fixed;
	bottom: 65px;
	right: 73px;
	z-index: 2200;
	color : var(--second-color);
	font-size: 1.5rem;

}

.goto-up:hover{
	animation: smooth-bounce 0.5s ease-in-out infinite;
	cursor: pointer;
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
			transform: translateY(0); 
	}
	40% {
			transform: translateY(-3px); 
	}
}


@keyframes smooth-bounce {
	0%, 100% {
			transform: translateY(0);
	}
	50% {
			transform: translateY(-5px);
	}
}

.footer-sitemap{
	display: flex;	
}

.footer-sitemap a{
	color: #7f7f7f;
}

.footer-sitemap a:hover{
	color: #c4c4c4;
	background-color : #000000 !important;
}